<template>
    <div v-loading="pageLoaing">
        <div class="w-form-header" style="min-height: 22px">
            <div class="header table-title-btn" v-if="!pageLoaing && !isViewOp">
                    <div style="display: flex">
                        <el-dropdown
                            style="margin-right: 10px"
                            v-if="route.query.styleNum"
                        >
                            <el-button type="primary">
                                打印<el-icon class="el-icon--right"
                                    ><arrow-down
                                /></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <!-- <el-dropdown-item>
                                    <el-button
                                        type="primary"
                                        @click="print('product')"
                                        >打印产品规格</el-button
                                    >
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button
                                        type="primary"
                                        @click="print('design')"
                                        >打印设计规格</el-button
                                    >
                                </el-dropdown-item> -->
                                    <el-dropdown-item>
                                        <el-button
                                            type="primary"
                                            @click="previewSpec('product')"
                                            >预览产品规格</el-button
                                        >
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button
                                            type="primary"
                                            @click="previewSpec('design')"
                                            >预览设计规格</el-button
                                        >
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <template v-if="userStore.userInfo.authority?.authorityId !== 1000">
                            <div
                                v-if="
                                    formData.submitNums && formData.submitNums >= 1
                                "
                            >
                                <template
                                    v-if="isEditing && formData.status == '0'"
                                >
                                    <el-button
                                        type="primary"
                                        class="table-button"
                                        :disabled="!isEditProductTab || pageLocked"
                                        @click="editProductTab('lock')"
                                        >编辑产品规格</el-button
                                    >
                                    <el-button
                                        type="primary"
                                        class="table-button"
                                        style="margin-left: 10px"
                                        :disabled="!isEditDesignTab || pageLocked"
                                        @click="editDesignTab('lock')"
                                        >编辑设计规格</el-button
                                    >
                                </template>
                                <template
                                    v-if="!isEditing && formData.status == '0'"
                                >
                                    <el-button
                                        v-if="formData.status != '1'"
                                        type="primary"
                                        :loading="saveLoading"
                                        :disabled="pageLocked"
                                        @click="save('0')"
                                        >保存</el-button
                                    >
                                    <el-button
                                        v-if="formData.status != '1'"
                                        type="success"
                                        :loading="submitLoading"
                                        :disabled="pageLocked"
                                        @click="save('1')"
                                        >提交</el-button
                                    >
                                    <el-button
                                        type="primary"
                                        class="table-button"
                                        style="margin-left: 10px"
                                        :disabled="!isEditProductTab || pageLocked"
                                        @click="editProductTab"
                                        >编辑产品规格</el-button
                                    >
                                    <el-button
                                        type="primary"
                                        class="table-button"
                                        style="margin-left: 10px"
                                        :disabled="!isEditDesignTab || pageLocked"
                                        @click="editDesignTab"
                                        >编辑设计规格</el-button
                                    >
                                </template>
                                <el-button
                                    v-if="formData.status == '1'"
                                    type="success"
                                    :disabled="pageLocked"
                                    :loading="saveLoading"
                                    @click="editReasonDialogFun('0')"
                                    >修改</el-button
                                >

                                <el-button
                                    v-if="formData.status == '1'"
                                    type="primary"
                                    :disabled="!!formData.verifyTime"
                                    @click="
                                        () => {
                                            confirmDrawingShow = true;
                                            confirmDrawingDate = '';
                                        }
                                    "
                                    >代客确认图纸</el-button
                                >
                                <!-- <el-button
                                v-if="
                                    !formData.moldStartNotice ||
                                    !formData.moldStartNotice.ID
                                "
                                type="primary"
                                @click="moldStartNoticeAdd"
                                >创建起模通知单</el-button
                            >
                            <el-button
                                v-if="
                                    formData.moldStartNotice &&
                                    formData.moldStartNotice.ID
                                "
                                type="primary"
                                @click="
                                    moldStartNoticeEdit(formData.moldStartNotice)
                                "
                                >修改起模通知单</el-button
                            > -->
                            </div>
                            <div v-else>
                                <template v-if="isEditing">
                                    <!-- <el-button type="primary" @click="isEditing = false"
                                    >编辑</el-button
                                > -->
                                    <el-button
                                        class="table-button"
                                        :type="'primary'"
                                        :disabled="!isEditProductTab || pageLocked"
                                        @click="editProductTab('lock')"
                                        >编辑产品规格</el-button
                                    >
                                    <el-button
                                        class="table-button"
                                        style="margin-left: 10px"
                                        :type="'primary'"
                                        :disabled="!isEditDesignTab || pageLocked"
                                        @click="editDesignTab('lock')"
                                        >编辑设计规格</el-button
                                    >
                                </template>
                                <template v-else>
                                    <el-button
                                        type="primary"
                                        :loading="saveLoading"
                                        @click="save('0')"
                                        >保存</el-button
                                    >
                                    <el-button
                                        type="success"
                                        :loading="submitLoading"
                                        @click="save('1')"
                                        >提交</el-button
                                    >
                                    <el-button
                                        :type="'primary'"
                                        class="table-button"
                                        :disabled="!isEditProductTab"
                                        @click="editProductTab"
                                        >编辑产品规格</el-button
                                    >
                                    <el-button
                                        :type="'primary'"
                                        class="table-button"
                                        style="margin-left: 10px"
                                        :disabled="!isEditDesignTab"
                                        @click="editDesignTab"
                                        >编辑设计规格</el-button
                                    >
                                </template>
                            </div>
                            <el-button
                                v-if="
                                    (!formData.moldStartNotice ||
                                        !formData.moldStartNotice.ID) &&
                                    route.query.styleNum
                                "
                                style="margin-left: 10px"
                                type="primary"
                                @click="moldStartNoticeAdd"
                                >创建起模通知单</el-button
                            >
                            <el-button
                                v-if="
                                    formData.moldStartNotice &&
                                    formData.moldStartNotice.ID &&
                                    route.query.styleNum
                                "
                                style="margin-left: 10px"
                                type="primary"
                                @click="
                                    moldStartNoticeEdit(formData.moldStartNotice)
                                "
                                >修改起模通知单</el-button
                            >
                            <!-- <el-button
                            v-if="route.query.styleNum && !isEditing"
                            type="primary"
                            class="table-button"
                            style="margin-left: 10px"
                            @click="copySpecificationFun()"
                            >复制</el-button
                            > -->
                        </template>
                    </div>
                    <span
                        style="margin-right: 20px; color: red; font-size: 16px"
                        v-if="pageLocked"
                        >{{ editUser }}正在编辑</span
                    >
              
                <div v-else></div>
                <div v-if="type == 'update'" class="title-box">
                    <el-button
                        type="primary"
                        v-if="
                            selfEidt &&
                            isEditing &&
                            userStore.userInfo.authority?.authorityId !== 1000
                        "
                        class="table-button"
                        @click="deleteLockRecordFun('1')"
                        >解锁</el-button
                    >
                    <!-- <span
                        style="margin-right: 20px; color: red; font-size: 16px"
                        v-if="pageLocked"
                        >{{ editUser }}正在编辑</span
                    > -->
                    <span class="version">
                        版本: {{ formData.version || "1" }}</span
                    >
                    <span class="status">{{
                        formData.status == "1" ? "已確認" : "草稿"
                    }}</span>
                </div>
            </div>
            <div class="header table-title-btn" v-if="!pageLoaing && isViewOp">
                <div class="title-box" style="margin-left: auto">
                    <span class="version">
                        版本: {{ formData.version || "1" }}</span
                    >
                </div>
            </div>
        </div>
        <div class="gva-form-box admin-content">
            <div class="w-form-box">
                <el-form
                    ref="elFormRef"
                    :model="formData"
                    label-position="right"
                    :rules="rule"
                    label-width="90px"
                >
                    <div class="list-header">基础信息</div>
                    <el-row v-if="type == 'create'" :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="款式编号:" prop="styleNum">
                                <div
                                    style="
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                    "
                                >
                                    <el-select
                                        v-model="formData.styleNum"
                                        placeholder="点击查询"
                                        style="
                                            min-width: 140px;
                                            margin-right: 10px;
                                        "
                                        filterable
                                        disabled
                                        remote
                                        :remote-method="
                                            remoteMethodProjectStyles
                                        "
                                        @click="openCreateAndEdit"
                                        @change="productStylesChange"
                                    >
                                        <el-option
                                            v-for="item in state.productStylesList"
                                            :key="item.styleNum"
                                            :label="item.styleNum"
                                            :value="item.styleNum"
                                        />
                                    </el-select>
                                    <!-- <el-icon @click="openCreateAndEdit"
                                        ><Search
                                    /></el-icon> -->
                                </div>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item
                                label="客户架倾角度:"
                                prop="customerTiltAngle"
                            >
                                <input
                                    v-model="formData.customerTiltAngle"
                                    :clearable="true"
                                    placeholder="自定义填写"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="片弧弯:" prop="sheetArcBend">
                                <el-select
                                    v-model="formData.sheetArcBend"
                                    placeholder="请选择"
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in dictOptions.sheetArcBend"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item
                                label="本厂架倾角度:"
                                prop="localTiltAngle"
                            >
                                <input
                                    v-model="formData.localTiltAngle"
                                    :clearable="true"
                                    placeholder="自定义填写"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="客户编号:" prop="cumstomerNum">
                                <input
                                    v-model="formData.cumstomerNum"
                                    placeholder="自动获取"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="SBU:" prop="sbuNum">
                                <input
                                    v-model="formData.sbuNum"
                                    :clearable="true"
                                    placeholder="自动获取"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item
                                label="客户款号:"
                                prop="customerStyleNum"
                            >
                                <input
                                    v-model="formData.customerStyleNum"
                                    :clearable="true"
                                    placeholder="自动获取"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item
                                label="本厂款号:"
                                prop="localStyleNum"
                            >
                                <input
                                    v-model="formData.localStyleNum"
                                    placeholder="自动获取"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item
                                label="客户品牌:"
                                prop="customerBrand"
                            >
                                <input
                                    v-model="formData.customerBrand"
                                    placeholder="自动获取"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item
                                label="镜架材质:"
                                prop="frameMaterials"
                            >
                                <input
                                    v-model="formData.frameMaterials"
                                    placeholder="自动获取"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col
                            v-if="formData.frameMaterials == '中金架'"
                            :span="6"
                        >
                            <el-form-item
                                label="中金架类:"
                                prop="metalFrameCate"
                            >
                                <el-select
                                    v-model="formData.metalFrameCate"
                                    placeholder="请选择"
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in dictOptions.metalFrameCate"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label="款式备注:"
                                prop="styleNote"
                                style="width: 100%"
                            >
                                <el-input
                                    v-model="formData.styleNote"
                                    :clearable="true"
                                    :autosize="{ minRows: 1 }"
                                    :maxlength="500"
                                    show-word-limit
                                    type="textarea"
                                    placeholder="自定义填写"
                                    :disabled="isEditing"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <plmProductSpecViewBase
                        v-if="type == 'update'"
                        v-model:formData="formData"
                        :dict-options="dictOptions"
                        :product-styles-list="state.productStylesList"
                        :is-editing="isEditing"
                        @remoteMethodProjectStyles="remoteMethodProjectStyles"
                        @productStylesChange="productStylesChange"
                    />
                </el-form>
            </div>
            <el-collapse v-model="collapseValue" class="collapse-items">
                <el-collapse-item name="1" :key="'collapse-1'">
                    <!-- 尺码 -->
                    <template #title>
                        <span>尺码</span>
                        <span class="collapse-left">{{
                            collapseValue.includes("1") ? "收起" : "展开"
                        }}</span>
                    </template>
                    <div class="chima-box table-form">
                        <div class="table-title">
                            <el-button
                                type="primary"
                                :disabled="isEditing"
                                @click="onAddItem"
                            >
                                新增尺码
                            </el-button>
                        </div>
                        <el-table
                            :data="eyeSizeData"
                            style="width: 100%; margin-top: 10px"
                            border
                        >
                            <el-table-column
                                prop="size"
                                label="序号"
                                min-width="25%"
                            >
                                <template #default="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="sizeNum"
                                label="尺码编号"
                                min-width="50%"
                            >
                                <template #default="scope">
                                    <input
                                        v-model="scope.row.sizeNum"
                                        :maxlength="40"
                                        placeholder="请输入尺码编号"
                                        :disabled="scope.row.state"
                                        @focus="focusSize(scope.row)"
                                        @blur="sizeBlurTest(scope.row)"
                                    />
                                    <!-- <div v-if="scope.row.hasDrawing">
                                        <span>
                                            {{ scope.row.sizeNum }}
                                        </span>
                                        <span
                                            >({{ scope.row.drawingName }})</span
                                        >
                                    </div> -->
                                    <div
                                        v-if="scope.row.err"
                                        style="
                                            font-size: 12px;
                                            color: red;
                                            line-height: normal;
                                        "
                                    >
                                        {{ scope.row.err }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="drawingName"
                                label="图纸名称"
                                min-width="50%"
                            >
                                <template #default="scope">
                                    <div v-if="scope.row.hasDrawing">
                                        <span>{{ scope.row.drawingName }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="op"
                                label="操作"
                                min-width="25%"
                            >
                                <template #default="scope">
                                    <a
                                        href="javascript:"
                                        v-if="!isEditing"
                                        @click.prevent="deleteRow(scope.$index)"
                                        >删除</a
                                    >
                                    <a
                                        href="javascript:"
                                        v-if="!isEditing && scope.row.state"
                                        class="image-icon"
                                        @click.prevent="
                                            changeRow(scope.$index, scope.row)
                                        "
                                        >编辑</a
                                    >
                                    <!-- <a
                                                v-if="scope.row.hasDrawing"
                                                class="image-icon"
                                                :href="`dayuer-cadopen:${path1}${scope.row.fileUrl}?ID=${scope.row.dramwingID}&action=view&X-Token=${xToken}`"
                                                >查看图纸</a
                                            > -->
                                    <a
                                        v-if="scope.row.hasDrawing"
                                        href="javascript:void(0)"
                                        class="image-icon"
                                        @click="downloadFile(scope.row)"
                                        >下载图纸</a
                                    >
                                    <span />
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item>
                <el-collapse-item name="2" :key="'collapse-2'">
                    <template #title>
                        眼型脾型
                        <span class="collapse-left">{{
                            collapseValue.includes("2") ? "收起" : "展开"
                        }}</span>
                    </template>
                    <!-- 眼型脾型 -->
                    <yanPi
                        v-model:yanPiData="yanPiDataList"
                        :size-data="eyeSizeData"
                        :is-editing="isEditing"
                    />
                </el-collapse-item>
                <el-collapse-item name="3" :key="'collapse-3'">
                    <template #title
                        >颜色
                        <span class="collapse-left">{{
                            collapseValue.includes("3") ? "收起" : "展开"
                        }}</span>
                    </template>
                    <!-- 颜色 -->
                    <el-tabs
                        type="border-card"
                        class="tabs-box"
                        v-model="tabsValue1"
                    >
                        <el-tab-pane name="tabsValue1a">
                            <template #label>
                                <div
                                    :class="[
                                        {
                                            'custom-tabs-label-isEdit':
                                                !isEditProductTab,
                                        },
                                        'custom-tabs-label',
                                    ]"
                                >
                                    产品规格-颜色
                                </div>
                            </template>
                            <colorList
                                ref="colorList1Ref"
                                :eye-color-data="eyeColorData1"
                                :form-data="formData"
                                :dict-options="dictOptions"
                                :del-type="'colors1'"
                                :is-editing="isEditProductTab"
                                @getColorList="getColorList1"
                                @colorChangeFun="colorChangeFun1"
                                @copyColor="copyColor"
                            />
                        </el-tab-pane>
                        <el-tab-pane name="tabsValue1b">
                            <template #label>
                                <div
                                    :class="[
                                        {
                                            'custom-tabs-label-isEdit':
                                                !isEditDesignTab,
                                        },
                                        'custom-tabs-label',
                                    ]"
                                >
                                    设计规格-颜色
                                </div>
                            </template>
                            <colorList
                                ref="colorList2Ref"
                                key="eyeColorData2key"
                                :eye-color-data="eyeColorData2"
                                :form-data="formData"
                                :dict-options="dictOptions"
                                :del-type="'colors2'"
                                :is-editing="isEditDesignTab"
                                @getColorList="getColorList2"
                                @colorChangeFun="colorChangeFun2"
                                @copyColor="copyColor"
                            />
                        </el-tab-pane>
                    </el-tabs>
                </el-collapse-item>
                <el-collapse-item name="4" :key="'collapse-4'">
                    <template #title
                        >配件规格清单
                        <span class="collapse-left">{{
                            collapseValue.includes("4") ? "收起" : "展开"
                        }}</span>
                    </template>
                    <el-tabs
                        type="border-card"
                        class="tabs-box"
                        v-model="tabsValue2"
                    >
                        <el-tab-pane name="tabsValue2a">
                            <template #label>
                                <div
                                    :class="[
                                        {
                                            'custom-tabs-label-isEdit':
                                                !isEditProductTab,
                                        },
                                        'custom-tabs-label',
                                    ]"
                                >
                                    产品规格-配件规格清单
                                </div>
                            </template>
                            <partSpecification
                                ref="partSpecification1Ref"
                                :color-data="eyeColorData1"
                                :size-data="eyeSizeData"
                                :is-editing="isEditProductTab"
                                :dict-options="dictOptions"
                                :del-type="'partSpecification1'"
                                :frameMaterials="formData.frameMaterials"
                                :frameList2="frameList2"
                                @getSelfPartsFun="getSelfPartsFun1"
                                @getTreeData="getTreeDataProduct"
                                @copyPartSpecification="copyPartSpecification"
                            />
                        </el-tab-pane>
                        <el-tab-pane name="tabsValue2b">
                            <template #label>
                                <div
                                    :class="[
                                        {
                                            'custom-tabs-label-isEdit':
                                                !isEditDesignTab,
                                        },
                                        'custom-tabs-label',
                                    ]"
                                >
                                    设计规格-配件规格清单
                                </div>
                            </template>
                            <partSpecification
                                ref="partSpecification2Ref"
                                key="partSpecificationKey"
                                :color-data="eyeColorData2"
                                :size-data="eyeSizeData"
                                :del-type="'partSpecification2'"
                                :is-editing="isEditDesignTab"
                                :dict-options="dictOptions"
                                :frameMaterials="formData.frameMaterials"
                                :frameList2="frameList2"
                                @getSelfPartsFun="getSelfPartsFun2"
                                @getTreeData="getTreeDataDesign"
                                @copyPartSpecification="copyPartSpecification"
                            />
                        </el-tab-pane>
                    </el-tabs>
                </el-collapse-item>
                <el-collapse-item name="5" :key="'collapse-5'">
                    <template #title
                        >标志\图案工艺说明
                        <span class="collapse-left">{{
                            collapseValue.includes("5") ? "收起" : "展开"
                        }}</span>
                    </template>
                    <el-tabs
                        type="border-card"
                        class="tabs-box"
                        v-model="tabsValue3"
                    >
                        <el-tab-pane name="tabsValue3a">
                            <template #label>
                                <div
                                    :class="[
                                        {
                                            'custom-tabs-label-isEdit':
                                                !isEditProductTab,
                                        },
                                        'custom-tabs-label',
                                    ]"
                                >
                                    产品规格-标志\图案工艺说明
                                </div>
                            </template>
                            <designSpecifications
                                ref="designSpecificationsRef1"
                                :color-data="eyeColorData1"
                                :size-data="eyeSizeData"
                                :self-parts="selfParts1"
                                :dict-options="dictOptions"
                                :del-type="'designSpecifications1'"
                                :is-editing="isEditProductTab"
                                @copyDesignSpecifications="
                                    copyDesignSpecifications
                                "
                            />
                        </el-tab-pane>
                        <el-tab-pane name="tabsValue3b">
                            <template #label>
                                <div
                                    :class="[
                                        {
                                            'custom-tabs-label-isEdit':
                                                !isEditDesignTab,
                                        },
                                        'custom-tabs-label',
                                    ]"
                                >
                                    设计规格-标志\图案工艺说明
                                </div>
                            </template>
                            <designSpecifications
                                ref="designSpecificationsRef2"
                                key="designSpecificationsKey"
                                :color-data="eyeColorData2"
                                :size-data="eyeSizeData"
                                :self-parts="selfParts2"
                                :dict-options="dictOptions"
                                :del-type="'designSpecifications2'"
                                :is-editing="isEditDesignTab"
                                @copyDesignSpecifications="
                                    copyDesignSpecifications
                                "
                            />
                        </el-tab-pane>
                    </el-tabs>
                </el-collapse-item>
                <el-collapse-item name="6" :key="'collapse-6'">
                    <template #title
                        >测试标准
                        <span class="collapse-left">{{
                            collapseValue.includes("6") ? "收起" : "展开"
                        }}</span>
                    </template>
                    <!-- 测试标准 -->
                    <testStandard
                        ref="testStandardRef"
                        :product-styles-data="productStylesData"
                        :is-editing="isEditing"
                    />
                </el-collapse-item>
                <el-collapse-item name="7" :key="'collapse-7'">
                    <template #title
                        >历史修改备注
                        <span class="collapse-left">{{
                            collapseValue.includes("7") ? "收起" : "展开"
                        }}</span>
                    </template>
                    <!-- 历史修改备注 -->
                    <el-table :data="formData.notes" border style="width: 100%">
                        <el-table-column
                            type="index"
                            label="序号"
                            width="80px"
                        />
                        <el-table-column label="更改内容" prop="content" />
                        <el-table-column label="更改原因" prop="reason" />
                        <el-table-column label="详细说明" prop="detail" />
                        <el-table-column label="更新时间" prop="">
                            <template #default="scope">
                                <span>
                                    {{
                                        formatDate(
                                            scope.row.CreatedAt,
                                            "yyyy-MM-dd hh:mm:ss"
                                        )
                                    }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="更新人" prop="updateUser" />
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </div>
        <!-- 添加修改备注 -->
        <el-dialog
            v-model="editReasonDialogShow"
            destroy-on-close
            width="50%"
            title="添加修改备注"
        >
            <el-form ref="editReasonDialogRef" inline :model="editReasonForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="内容分类：">
                            <el-checkbox-group v-model="editReasonForm.content">
                                <el-checkbox
                                    v-for="item in contentCateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    style="width: 100%"
                                />
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="原因分类：">
                            <el-checkbox-group v-model="editReasonForm.reason">
                                <el-checkbox
                                    v-for="item in reasonCateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    style="width: 100%"
                                />
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="详细说明：" style="width: 100%">
                            <textarea
                                v-model="editReasonForm.detail"
                                :rows="5"
                                style="width: 90%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button type="primary" @click="save('1', 'edit')"
                        >确定</el-button
                    > -->
                    <el-button type="primary" @click="saveChange()"
                        >确定</el-button
                    >
                    <el-button @click="editReasonDialogShow = false"
                        >取消</el-button
                    >
                </div>
            </template>
        </el-dialog>
        <!-- 复制 -->
        <el-dialog
            v-model="copySpecificationShow"
            destroy-on-close
            title="复制产品规格"
            width="450"
        >
            请选择款式编号
            <el-select
                v-model="fromStyleNum"
                placeholder="请选择"
                style="width: 100%"
                filterable
                remote
                :remote-method="remoteMethodProjectStylesCopy"
            >
                <el-option
                    v-for="item in productStylesListCopy"
                    :key="item.styleNum"
                    :label="item.styleNum"
                    :value="item.styleNum"
                />
            </el-select>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="replicateProductSpecFun">
                        确定
                    </el-button>
                    <el-button @click="copySpecificationShow = false">
                        关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 代客确认图纸 -->
        <el-dialog
            v-model="confirmDrawingShow"
            destroy-on-close
            width="600px"
            title="代客确认图纸"
        >
            请选择日期：
            <el-date-picker
                v-model="confirmDrawingDate"
                type="date"
                placeholder="请选择日期"
                :size="'small'"
            />
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="confirmDrawingFun">
                        确定
                    </el-button>
                    <el-button @click="confirmDrawingShow = false">
                        关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <styleNumSearch
            v-if="styleNumDialogShow"
            @closeDialog="closeDialog"
            @selectStyleNum="selectStyleNum"
        ></styleNumSearch>

        <!-- 复制 产品规格配件清单 == 设计规格配件规格清单 -->
        <el-dialog
            v-model="copyPartDialogShow"
            destroy-on-close
            width="950px"
            title="配件清单复制"
            top="60px"
        >
            <div class="copy-part-dialog">
                <el-table
                    :data="copyPartData"
                    highlight-current-row
                    row-key="ida"
                    default-expand-all
                    :tree-props="{ children: 'children', hasChildren: false }"
                    style="width: 100%"
                    max-height="calc(100vh - 230px)"
                    border
                >
                    <el-table-column
                        prop="label"
                        label="齋架/配件"
                        width="130px"
                    >
                        <template #default="{ row }">
                            <div style="display: flex; align-items: center">
                                <el-checkbox
                                    v-if="row.partLevel == 1"
                                    v-model="row.checked"
                                    label=""
                                    style="height: auto"
                                />
                                <span>{{ row.label }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="orderType"
                        width="80px"
                        label="自制/外購"
                    />
                    <el-table-column
                        prop="componentNum"
                        width="150px"
                        label="元件编号"
                    />
                    <el-table-column prop="colorNum" label="颜色" />
                    <el-table-column prop="sizeNum" label="尺码" />
                    <el-table-column prop="sapDesc" label="物料说明" />
                    <el-table-column prop="appearanceSpec" label="外观规格" />
                    <el-table-column prop="num" width="80px" label="数量" />
                    <el-table-column prop="unit" width="80px" label="单位" />
                    <el-table-column prop="groupDesc" label="物料群组" />
                    <!-- <el-table-column prop="note" label="备注" /> -->
                </el-table>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="copyPartDialogConfirm">
                        确定
                    </el-button>
                    <el-button @click="copyPartDialogShow = false">
                        关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 预览 -->
        <previewBox
            v-if="previewDialogShow"
            @closePreview="closePreview"
            :printStyle="getPrintStyle()"
            previewType="productSpecAdd"
            @print="print"
            @editPrintStatus="editPrintStatus"
        >
            <div>
                <div class="one-box">
                    <div class="ftsz10px"></div>
                    <div
                        style="
                            text-align: center;
                            position: relative;
                            top: -14px;
                            font-weight: bold;
                        "
                    >
                        {{
                            witchPreview == "product" ? "产品规格" : "设计规格"
                        }}
                    </div>
                    <div
                        class="ftsz10px"
                        style="
                            margin-right: 10px;
                            font-weight: bold;
                            position: relative;
                        "
                    >
                        <div>版本:{{ formData.version || "暂无" }}</div>
                    </div>
                </div>

                <div class="content-box">
                    <div class="title">基本資料</div>
                    <div class="content">
                        <div class="descriptions">
                            <div class="descriptionsItem">
                                <span>款式编号：</span
                                ><span>{{ formData.styleNum }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>客户编号：</span
                                ><span>{{ formData.cumstomerNum }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>客户架倾角度：</span
                                ><span>{{ formData.customerTiltAngle }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>片弧弯：</span
                                ><span>{{ formData.sheetArcBend }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>SBU：</span
                                ><span>{{ formData.sbuNum }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>客户款号：</span
                                ><span>{{ formData.customerStyleNum }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>本厂架倾角度：</span
                                ><span>{{ formData.localTiltAngle }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>本厂款号：</span
                                ><span>{{ formData.localStyleNum }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>客户品牌：</span
                                ><span>{{ formData.customerBrand }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>镜架材质：</span
                                ><span>{{ formData.frameMaterials }}</span>
                            </div>

                            <div
                                class="descriptionsItem"
                                v-if="formData.frameMaterials == '中金架'"
                            >
                                <span>中金架类：</span
                                ><span>{{ formData.metalFrameCate }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>创建时间：</span
                                ><span>{{
                                    formatDate(
                                        formData.CreatedAt,
                                        "yyyy-MM-dd hh:mm:ss"
                                    )
                                }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>更新时间：</span
                                ><span>{{
                                    formatDate(
                                        formData.UpdatedAt,
                                        "yyyy-MM-dd hh:mm:ss"
                                    )
                                }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>创建人：</span
                                ><span>{{ formData.createUser }}</span>
                            </div>

                            <div class="descriptionsItem">
                                <span>更新人：</span
                                ><span>{{ formData.updateUser }}</span>
                            </div>

                            <div class="addLine">
                                <span>款式備注：</span
                                ><span>{{ formData.styleNote }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content-box table1" v-if="eyeSizeData.length">
                    <div class="title">尺码</div>
                    <div class="content" style="border-bottom: 0">
                        <div class="myTable-head">
                            <div>序号</div>
                            <div>尺码编号</div>
                            <div>图纸名称</div>
                        </div>
                        <div
                            class="myTable-content"
                            v-for="(item, index) in eyeSizeData"
                            :key="index"
                        >
                            <div>
                                {{ index + 1 }}
                            </div>
                            <div>
                                {{ item.sizeNum }}
                            </div>
                            <div>
                                {{ item.drawingName }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content-box table1" v-if="yanPiDataList.length">
                    <div class="title">眼型脾型</div>
                    <div class="content" style="border-bottom: 0">
                        <div class="myTable-head">
                            <div>眼型编号</div>
                            <div>临时编号</div>
                            <div>脾型编号</div>
                            <div>硬模编号</div>
                            <div>脾型类型</div>
                            <div>关联尺码</div>
                        </div>
                        <div
                            class="myTable-content"
                            v-for="(item, index) in yanPiDataList"
                            :key="index"
                        >
                            <div>
                                {{ item.eyeNum }}
                            </div>
                            <div>
                                {{ item.tempTypeNum }}
                            </div>
                            <div>
                                {{ item.spleenNum }}
                            </div>
                            <div>
                                {{ item.hardMoldNum }}
                            </div>
                            <div>
                                {{ item.spleenType }}
                            </div>
                            <div>
                                {{ item.sizeNum }}
                            </div>
                        </div>
                    </div>
                </div>

                <div
                    class="content-box table1"
                    v-if="
                        (witchPreview == 'product' &&
                            eyeColorData1.length > 0) ||
                        (witchPreview == 'design' && eyeColorData2.length > 0)
                    "
                >
                    <div class="title">颜色</div>
                    <div class="content" style="border-bottom: 0">
                        <div class="myTable-head">
                            <div></div>
                            <div>客色號</div>
                            <div>客款號</div>
                            <div>本廠颜色描述</div>
                            <div>圈颜色要求</div>
                            <div>脾颜色耍求</div>
                            <div>其它颜色要求</div>
                        </div>
                        <template v-if="witchPreview == 'product'">
                            <div
                                class="myTable-content"
                                v-for="(item, index) in eyeColorData1"
                                :key="index"
                            >
                                <div>
                                    {{ item.colorNum }}
                                </div>
                                <div>
                                    {{ item.customerColorNum }}
                                </div>
                                <div>
                                    {{ item.customerStyleNum }}
                                </div>
                                <div>
                                    {{ item.localColorDesc }}
                                </div>
                                <div>
                                    {{ item.circleColorRequire }}
                                </div>
                                <div>
                                    {{ item.spleenColorRequire }}
                                </div>
                                <div>
                                    {{ item.otherColorRequire }}
                                </div>
                            </div>
                        </template>
                        <template v-if="witchPreview == 'design'">
                            <div
                                class="myTable-content"
                                v-for="(item, index) in eyeColorData2"
                                :key="index"
                            >
                                <div>
                                    {{ item.colorNum }}
                                </div>
                                <div>
                                    {{ item.customerColorNum }}
                                </div>
                                <div>
                                    {{ item.customerStyleNum }}
                                </div>
                                <div>
                                    {{ item.localColorDesc }}
                                </div>
                                <div>
                                    {{ item.circleColorRequire }}
                                </div>
                                <div>
                                    {{ item.spleenColorRequire }}
                                </div>
                                <div>
                                    {{ item.otherColorRequire }}
                                </div>
                            </div>
                        </template>
                    </div>
                </div>

                <div
                    class="content-box table2"
                    v-if="printPartTableData.length"
                >
                    <div class="title">配件及物料清單</div>
                    <div class="content" style="border-bottom: 0">
                        <div class="myTable-head">
                            <div>斋架/配件</div>
                            <div>自制/外购</div>
                            <div>配件编号</div>
                            <div>物料说明</div>
                            <div>外观规格</div>
                            <div>数量</div>
                            <div>单位</div>
                            <div>备注</div>
                        </div>
                        <div
                            class="myTable-content"
                            v-for="(item, index) in printPartTableData"
                            :key="index"
                        >
                            <div>
                                <span
                                    :style="{
                                        marginLeft:
                                            item.selfLevel == 1
                                                ? 0
                                                : item.selfLevel == 2
                                                ? '12px'
                                                : '24px',
                                    }"
                                >
                                    {{
                                        item.selfLevel == 1
                                            ? item.label
                                            : item.accessoryName
                                    }}</span
                                >
                            </div>
                            <div>
                                {{ item.orderType || "" }}
                            </div>
                            <div>
                                {{ item.componentNum + item.colorNum || "" }}
                            </div>
                            <div>
                                {{ item.sapDesc || "" }}
                            </div>
                            <div>
                                {{ item.appearanceSpec || "" }}
                            </div>
                            <div>
                                {{ item.num || "" }}
                            </div>
                            <div>
                                {{ item.unit || "" }}
                            </div>
                            <div>
                                {{ item.note || "" }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content-box table3" v-if="signTableData.length">
                    <div class="title">標志/工藝圖案説明</div>
                    <div class="content" style="border-bottom: 0">
                        <div class="myTable-head">
                            <div>配件名稱</div>
                            <div>位置</div>
                            <div>工藝</div>
                            <div>工藝做色</div>
                            <div>新舊</div>
                            <div>標志/圖案編號</div>
                            <div>尺碼</div>
                            <div>顔色</div>
                        </div>
                        <div
                            class="myTable-content"
                            v-for="(item, index) in signTableData"
                            :key="index"
                        >
                            <div>
                                {{ item.accessoryName }}
                            </div>
                            <div>
                                {{ item.position }}
                            </div>
                            <div>
                                {{ item.workmanship }}
                            </div>
                            <div>
                                {{ item.workmanshipColor }}
                            </div>
                            <div>
                                {{ item.workmanshipType }}
                            </div>
                            <div>
                                {{ item.signNum }}
                            </div>
                            <div>
                                {{ item.size }}
                            </div>
                            <div>
                                {{ item.color }}
                            </div>
                        </div>
                    </div>
                </div>

                <div
                    class="content-box table4"
                    v-if="
                        testStandardDocumentListData.length ||
                        witchPreview == 'product'
                    "
                >
                    <div class="title">測試標準</div>
                    <div class="content" style="border-bottom: 0">
                        <div class="myTable-head">
                            <div>測試項目</div>
                            <div>是否出測試報告</div>
                        </div>
                        <div
                            class="myTable-content"
                            v-for="(
                                item, index
                            ) in testStandardDocumentListData"
                            :key="index"
                        >
                            <div>
                                {{ item.testName }}
                            </div>
                            <div>
                                {{ item.isReport == "true" ? "是" : "否" }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </previewBox>
    </div>
</template>

<script setup>
import { useBtnAuth } from "@/utils/btnAuth";
const btnAuth = useBtnAuth();
import {
    ref,
    reactive,
    onMounted,
    toRefs,
    computed,
    watch,
    onActivated,
    onDeactivated,
    nextTick,
    onUnmounted,
} from "vue";
import { deepClone2, debounce } from "@/utils/tool.js";
import {
    changePartsToSkuFun,
    changeSkuToPartsFun,
    resDataToTreeData2,
    delTreeID,
    getChars,
} from "@/view/plmProductSpec/components/commonFun.js";
import { useDict } from "@/utils/dictionary.js";
import { emitter } from "@/utils/bus.js";
import { formatDate } from "@/utils/format";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import {
    getProductStylesList,
    findProductStyles,
    getProductStylesQuickList,
} from "@/api/plmProductStyles";
import { updateProductSpecAccessorySpec } from "@/api/productSpecAccessorySpec";
import {
    createProductSpec,
    updateProductSpec,
    findProductSpec,
    editProductSpec,
    productSpecPrint,
    getProductSpecList,
    replicateProductSpec,
    verifyProductSpec,
    createLockRecord,
    deleteLockRecord,
    findLockRecord,
    verifySizeColorIsAbilityDeleted,
} from "@/api/plmProductSpec";
import { getSelfmadeOutsourceSettingList } from "@/api/confSelfmadeOutsourceSetting";
import { downloadFilePost } from "@/api/comment.js";
import yanPi from "./components/yanPi.vue";
import designSpecifications from "./components/designSpecifications.vue";
import partSpecification from "@/view/plmProductSpec/components/partSpecification.vue";
import testStandard from "@/view/plmProductSpec/components/testStandard.vue";
import colorList from "@/view/plmProductSpec/components/colorList.vue";
import plmProductSpecViewBase from "@/view/plmProductSpec/plmProductSpecViewBase.vue";
import styleNumSearch from "@/components/styleNumSearch/styleNumSearch.vue";
import preview from "./components/preview.vue";
import { useUserStore } from "@/pinia/modules/user";
import previewBox from "./components/preview.vue";
defineOptions({
    name: "plmProductSpecAdd11",
});

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

const type = ref("");
const loading = ref(false);
const sbuOptions = ref([]); // sbu列表
const customerOptions = ref([]); // 客户编号列表
const brandOptions = ref([]); // 品牌列表
const saveLoading = ref(false); // 保存状态
const submitLoading = ref(false); // 保存状态
const pageLoaing = ref(false);
const collapseValue = ref(["1", "2", "3", "4", "5", "6", "7"]);

let robot = ref(null);
const isViewOp = ref(false); // 是否只显示，不展示按钮

const state = reactive({
    productStylesList: [], // 款式列表
});
// 字典
const dictOptions = ref({
    sheetArcBend: [], // 片弧度
    metalFrameCate: [], // 中金架类
    position: [], // 位置
    workmanship: [], // 工艺
    newOrOld: [], // 新旧
});

const formData = ref({
    styleNum: "",
    cumstomerNum: "",
    sbuNum: "",
    customerStyleNum: "",
    localStyleNum: "",
    customerBrand: "",
    metalFrameCate: "",
    frameMaterials: "",
    verifyTime: null,
    submitNums: null,
});
const isEditing = ref(false);
const isEditProductTab = ref(true);
const isEditDesignTab = ref(true);
const tabsValue1 = ref("tabsValue1a");
const tabsValue2 = ref("tabsValue2a");
const tabsValue3 = ref("tabsValue3a");
// 编辑产品规格
const editProductTab = async (flag) => {
    if (flag == "lock") {
        let status = await createLockRecordFun();
        if (!status) return;
    }
    isEditing.value = false;
    isEditProductTab.value = false;
    isEditDesignTab.value = true;
    tabsValue1.value = "tabsValue1a";
    tabsValue2.value = "tabsValue2a";
    tabsValue3.value = "tabsValue3a";
};
// 编辑设计规格
const editDesignTab = async (flag) => {
    if (flag == "lock") {
        let status = await createLockRecordFun();
        if (!status) return;
    }
    isEditing.value = false;
    isEditDesignTab.value = false;
    isEditProductTab.value = true;
    tabsValue1.value = "tabsValue1b";
    tabsValue2.value = "tabsValue2b";
    tabsValue3.value = "tabsValue3b";
};

const eyeSizeData = ref([]);
// 颜色表格数据 --- 产品规格
const eyeColorData1 = ref([
    // {
    //     colorNum: "A",
    //     customerColorNum: "c01",
    //     customerStyleNum: formData.value.customerStyleNum,
    //     localColorDesc: "101/BR-281",
    //     circleColorRequire: "圈颜色要求",
    //     spleenColorRequire: "圈颜色要求",
    //     otherColorRequire: "其它颜色要求",
    // },
]);
// 颜色表格数据 --- 设计规格
const eyeColorData2 = ref([]);
// 获取设计规格颜色列表
const getColorList1 = (list) => {
    console.log("ll", list);
    eyeColorData1.value = list;
};
// 获取产品规格规格颜色列表
const getColorList2 = (list) => {
    eyeColorData2.value = list;
};

const colorList1Ref = ref();
const colorList2Ref = ref();

// 眼型脾型参数
const yanPiDataList = ref([]);
// 自制配件类别
const selfParts1 = ref([]);
const selfParts2 = ref([]);
// 标志图案工艺说明
const signsTableData2 = ref([]);
const designSpecificationsRef1 = ref();
const designSpecificationsRef2 = ref();
// 设计规格--按颜色尺码组合的treeData
const treeData1Design = ref([]);
// 设计规格--按配件组合的treeData
const treeData2Design = ref([]);
// 产品规格--按颜色尺码组合的treeData
const treeData1Product = ref([]);
// 产品规格--按配件组合的treeData
const treeData2Product = ref([]);

// 测试标准
const testStandardRef = ref();

// 验证规则
const rule = reactive({
    // sbuNum: [{ required: true, message: "请选择款式编号", trigger: "blur" }],
    styleNum: [
        { required: true, message: "请选择款式编号", trigger: "change" },
    ],
});

const elFormRef = ref();

const frameList2 = ref([]);

// 选择的款式编号对应数据
const productStylesData = ref({});

// 获取款式列表
const remoteMethodProjectStyles = (keyword) => {
    getProductStylesQuickList(
        {
            page: 1,
            pageSize: 50,
            styleNum: keyword || undefined,
            status: "1",
        },
        true
    ).then((res) => {
        if (res.code == 0) {
            state.productStylesList = res.data.list;
        }
    });
};

// 初始化方法
const init = async (times) => {
    const {
        query: { styleNum, version },
    } = route;
    if (styleNum) {
        pageLoaing.value = true;
        type.value = "update";
        await findProductSpec({ styleNum, version })
            .then((res) => {
                pageLoaing.value = false;
                if (res.code === 0) {
                    formData.value = res.data.reproductSpec;
                    eyeSizeData.value = res.data.reproductSpec?.sizes;
                    let data = eyeSizeData.value;
                    eyeSizeData.value = data.map((item) => {
                        return {
                            ...item,
                            state: true,
                            disableds: false,
                        };
                    });
                    // 尺码
                    if (eyeSizeData.value.length > 0) {
                        eyeSizeData.value.map((item) => {
                            const index =
                                res.data.reproductSpec?.DdmsSpecDrawingWithUrl?.findIndex(
                                    (res) => {
                                        return (
                                            res.displaySize?.value ==
                                            item.sizeNum
                                        );
                                    }
                                );
                            if (
                                index != -1 &&
                                res.data.reproductSpec?.DdmsSpecDrawingWithUrl
                            ) {
                                item["hasDrawing"] = true;
                                item["fileUrl"] =
                                    res.data.reproductSpec.DdmsSpecDrawingWithUrl[
                                        index
                                    ].fileUrl;
                                item["drawingNum"] =
                                    res.data.reproductSpec.DdmsSpecDrawingWithUrl[
                                        index
                                    ].drawingNum;
                                item["dramwingID"] =
                                    res.data.reproductSpec.DdmsSpecDrawingWithUrl[
                                        index
                                    ].DdmsSpecDrawingListId;
                                item["drawingName"] =
                                    res.data.reproductSpec.DdmsSpecDrawingWithUrl[
                                        index
                                    ].drawingName;
                            }
                            return;
                        });
                    }
                    // 眼型脾型
                    yanPiDataList.value =
                        res.data.reproductSpec?.eyespleens.map((item) => {
                            item["ida"] = item.ID;
                            return item;
                        });
                    // 颜色 --- 产品规格
                    eyeColorData1.value = res.data.reproductSpec?.colors.map(
                        (item) => {
                            item["ida"] = item.ID;
                            return item;
                        }
                    );
                    // 颜色 --- 设计规格
                    eyeColorData2.value =
                        res.data.reproductSpec?.designColors?.map((item) => {
                            item["ida"] = item.ID;
                            return item;
                        });
                    // 图案工艺说明 --- 产品规格
                    let signsList1 = deepClone2(res.data.reproductSpec?.signs);
                    designSpecificationsRef1.value.updateSignsData(signsList1);
                    // 图案工艺说明 --- 设计规格
                    let signsList2 = deepClone2(
                        res.data.reproductSpec?.designSigns
                    );
                    designSpecificationsRef2.value.updateSignsData(signsList2);
                    // 测试报告
                    const tt = res.data.reproductSpec?.tests || [];
                    if (tt.length > 0) {
                        testStandardRef.value.updateTestStandard(
                            tt.map((t) => {
                                t["iscsCheck"] = JSON.parse(t.isReport);
                                return t;
                            })
                        );
                    }
                    // 历史备注
                    historyNoteTableData.value = res.data.notes
                        ? res.data.notes
                        : [];
                    // 产品规格---配件清单
                    // const colorData1 = eyeColorData1.value.map((item) => {
                    //     return item.colorNum;
                    // });
                    // const colorData2 = eyeColorData2.value.map((item) => {
                    //     return item.colorNum;
                    // });
                    // treeData1Product.value = resDataToTreeData1(
                    //     res.data.reproductSpec.accessorySpecs || [],
                    //     colorData1
                    // );
                    // treeData1Design.value = resDataToTreeData1(
                    //     res.data.reproductSpec.designAccessorySpecs || [],
                    //     colorData2
                    // );
                    treeData2Product.value = resDataToTreeData2(
                        res.data.reproductSpec.accessorySpecs || []
                    );
                    treeData2Design.value = resDataToTreeData2(
                        res.data.reproductSpec.designAccessorySpecs || []
                    );
                    if (
                        formData.value.status == "1" &&
                        res.data.reproductSpec.accessorySpecs.length == 0
                    ) {
                        tabsValue1.value = "tabsValue1b";
                        tabsValue2.value = "tabsValue2b";
                        tabsValue3.value = "tabsValue3b";
                    }
                    // 设计规格配件清单
                    setTimeout(() => {
                        emitter.emit("updateColorData");
                        // 更新规格清单数据
                        partSpecification1Ref.value.updateTreeData(
                            // treeData1Product.value,
                            treeData2Product.value,
                            times
                        );
                        partSpecification2Ref.value.updateTreeData(
                            // treeData1Design.value,
                            treeData2Design.value,
                            times
                        );
                    }, 400);
                    // 获取款式资讯信息，更新相关信息
                    if (formData.value.styleNum) {
                        let oldCustomerStyleNum =
                            formData.value.customerStyleNum;
                        findProductStyles({
                            styleNum: formData.value.styleNum,
                        }).then((res) => {
                            const m = res.data.reproductStyles;
                            productStylesUpdate(m);
                            if (m.customerStyleNum != oldCustomerStyleNum) {
                                setTimeout(() => {
                                    colorList1Ref.value?.updateBaseData();
                                    colorList2Ref.value?.updateBaseData();
                                }, 400);
                            }
                        });
                    }
                }
            })
            .catch((err) => {
                pageLoaing.value = false;
            });
    } else {
        type.value = "create";
    }
};

const hasSameValue = (arr) => {
    for (let i = 0; i < arr.length - 1; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i].sizeNum === arr[j].sizeNum) {
                return true;
            }
        }
        if (!arr[i].sizeNum) {
            return true;
        }
    }
    return false;
};

// 校验字符串a:主档编号+b:颜色编号
const testStr1 = (a, b) => {
    a = a || "";
    b = b || "";
    const str1 = a + b;
    if (str1.length > 18) {
        return {
            errStr: "主档编号+颜色编号不能超过18位",
            flag: true,
        };
    }
};

// 款式变化
function productStylesChange(params) {
    const selectArr = state.productStylesList.filter((item) => {
        return item.styleNum == params;
    })[0];
    productStylesUpdate(selectArr);
    testStandardRef.value.updateTest();
    colorList1Ref.value?.updateBaseData();
    colorList2Ref.value?.updateBaseData();
}
// 更新款式资讯相关的内容
const productStylesUpdate = (styleItem) => {
    formData.value["cumstomerNum"] = styleItem.cumstomerNum;
    formData.value["sbuNum"] = styleItem.sbuNum;
    formData.value["customerStyleNum"] = styleItem.customerStyleNum;
    formData.value["localStyleNum"] = styleItem.localStyleNum;
    formData.value["customerBrand"] = styleItem.customerBrand;
    formData.value["frameMaterials"] = styleItem.frameMaterial;
    if (styleItem.frameMaterial != "中金架" && formData.value.metalFrameCate) {
        formData.value["metalFrameCate"] = "";
    }
    productStylesData.value = {
        ...styleItem,
    };
};

// 尺码新增一行
const onAddItem = () => {
    eyeSizeData.value.push({
        id: eyeSizeData.value[eyeSizeData.value.length] + 1,
        sizeNum: "",
        err: "",
    });
};
// 尺码删除一行
const deleteRow = (index) => {
    ElMessageBox.confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(async () => {
        if (route.query.styleNum) {
            let param = {
                styleNum: route.query.styleNum,
                sizeNum: eyeSizeData.value[index].sizeNum, // sizeNum 和 colorNum 不能同时存在
            };
            let res = await verifySizeColorIsAbilityDeleted(param);
            if (res.code == 0 && !res.data.isDeleted) {
                ElNotification({
                    title: "已汇入SAP不能删除",
                    type: "error",
                    position: "bottom-left",
                    customClass: "notification-item-err",
                });
                return;
            } else if (res.code != 0) {
                ElNotification({
                    title: res.msg || "",
                    type: "error",
                    position: "bottom-left",
                    customClass: "notification-item-err",
                });
                return;
            }
        }
        sizeChangeVal.value["sizeOld"] = eyeSizeData.value[index].sizeNum;
        sizeChangeVal.value["sizeNew"] = "";
        sizeChangeVal.value["type"] = "del";
        emitter.emit("sizeChangeFun", sizeChangeVal.value);
        eyeSizeData.value.splice(index, 1);
    });
};

// 获取配件列表
const getSelfPartsFun1 = (list) => {
    // console.log("配件列表", list);
    const pL = list.map((item) => {
        return {
            label: item.label,
            value: item.label,
            orderType: item.orderType,
        };
    });
    selfParts1.value = [];
    pL.forEach((val) => {
        const index = selfParts1.value.findIndex((val2) => {
            return val2.value == val.value;
        });
        if (index == -1) {
            selfParts1.value.push(val);
        }
    });
};
const getSelfPartsFun2 = (list) => {
    // console.log("配件列表", list);
    const pL = list.map((item) => {
        return {
            label: item.label,
            value: item.label,
            orderType: item.orderType,
        };
    });
    selfParts2.value = [];
    pL.forEach((val) => {
        const index = selfParts2.value.findIndex((val2) => {
            return val2.value == val.value;
        });
        if (index == -1) {
            selfParts2.value.push(val);
        }
    });
};

// 获取规格清单---设计规格
const getTreeDataDesign = (data) => {
    treeData2Design.value = [];
    treeData1Design.value = [];
    const color = eyeColorData1.value.map((item) => {
        return item.colorNum;
    });
    if (data.type == "treeData2") {
        const treeData1 = changePartsToSkuFun(data.treeData, color);
        treeData1Design.value = deepClone2(treeData1);
        treeData2Design.value = deepClone2(data.treeData);
    }
    // const treeData1 = changePartsToSkuFun(data.treeData, color);
    //     treeData1Design.value = deepClone2(treeData1);
    //     treeData2Design.value = deepClone2(data.treeData);
    // if (data.type == "treeData1") {
    //     const treeData2 = changeSkuToPartsFun(data.treeData, color);
    //     treeData2Design.value = deepClone2(treeData2);
    //     treeData1Design.value = deepClone2(data.treeData);
    // } else if (data.type == "treeData2") {
    //     const treeData1 = changePartsToSkuFun(data.treeData, color);
    //     treeData1Design.value = deepClone2(treeData1);
    //     treeData2Design.value = deepClone2(data.treeData);
    // }
};
// 获取规格清单---产品规格
const getTreeDataProduct = (data) => {
    treeData1Product.value = [];
    treeData2Product.value = [];
    const color = eyeColorData2.value.map((item) => {
        return item.colorNum;
    });
    if (data.type == "treeData2") {
        const treeData1 = changePartsToSkuFun(data.treeData, color);
        treeData1Product.value = deepClone2(treeData1);
        treeData2Product.value = deepClone2(data.treeData);
    }
    // if (data.type == "treeData1") {
    //     const treeData2 = changeSkuToPartsFun(data.treeData, color);
    //     treeData2Product.value = deepClone2(treeData2);
    //     treeData1Product.value = deepClone2(data.treeData);
    // } else if (data.type == "treeData2") {
    //     const treeData1 = changePartsToSkuFun(data.treeData, color);
    //     treeData1Product.value = deepClone2(treeData1);
    //     treeData2Product.value = deepClone2(data.treeData);
    // }
};

// 尺码修改前值
const sizeChangeVal = ref({ sizeOld: "", sizeNew: "" });
// 尺码编号校验
const sizeBlurTest = (row) => {
    // row.disableds = !row.disableds
    row.state = !row.state;
    const flag = /^\d{1,10}-\d{1,10}-\d{1,10}$/.test(row.sizeNum);
    const len = eyeSizeData.value.filter((res) => {
        return res.sizeNum && res.sizeNum == row.sizeNum;
    }).length;
    if (!flag || len > 1) {
        row["err"] =
            len > 1 ? "不能输入重复尺码" : "只能输入成品尺码(格式:00-00-000)";
        row.sizeNum = "";
    } else {
        row["err"] = undefined;
    }
    // 尺码改变同步修改其他模块关联值
    sizeChangeVal.value["sizeNew"] = row.sizeNum;
    if (
        sizeChangeVal.value.sizeOld &&
        sizeChangeVal.value.sizeNew &&
        sizeChangeVal.value.sizeOld != sizeChangeVal.value.sizeNew
    ) {
        sizeChangeVal.value["type"] = "edit";
        emitter.emit("sizeChangeFun", sizeChangeVal.value);
    } else if (sizeChangeVal.value.sizeOld && !sizeChangeVal.value.sizeNew) {
        sizeChangeVal.value["type"] = "del";
        emitter.emit("sizeChangeFun", sizeChangeVal.value);
    }
};

// 修改尺码同步修改已选择尺码
const focusSize = async (item) => {
    item["err"] = undefined;
    console.log(item);
    sizeChangeVal.value["sizeOld"] = item.sizeNum;
};

const changeRow = async (row, states) => {
    if (route.query.styleNum) {
        let param = {
            styleNum: route.query.styleNum,
            sizeNum: eyeSizeData.value[row].sizeNum,
        };
        if (!param.sizeNum || !param.sizeNum) {
            states.state = !states.state;
            return;
        }
        let res = await verifySizeColorIsAbilityDeleted(param);

        if (res.data.isDeleted == false) {
            // ElMessage.error('已有SAP数据，不允许修改')
            ElNotification({
                title: "已汇入SAP,不允许修改",
                type: "error",
                position: "bottom-left",
                customClass: "notification-item-err",
            });
        }
        if (res.data.isDeleted == true) {
            states.state = !states.state;
            states.disableds = !states.disableds;
        }
    } else {
        states.state = !states.state;
    }
};

// 颜色修改同步修改关联值
const partSpecification1Ref = ref();
const partSpecification2Ref = ref();
const colorChangeFun1 = (colorChangeVal) => {
    designSpecificationsRef1.value.colorChangeFun(colorChangeVal);
    partSpecification1Ref.value.colorChangeFun(colorChangeVal);
};
const colorChangeFun2 = (colorChangeVal) => {
    designSpecificationsRef2.value.colorChangeFun(colorChangeVal);
    partSpecification2Ref.value.colorChangeFun(colorChangeVal);
};

// 修改备注模块
const editReasonDialogShow = ref(false);
const contentCateOptions = ref([]);
const reasonCateOptions = ref([]);
const editReasonForm = ref({
    content: [],
    reason: [],
    detail: "",
});
const historyNoteTableData = ref([]);
// 修改备注弹窗
// const editAndSbuStatus = ref("");
const editReasonDialogFun = async (subStatus) => {
    if (formData.value.submitNums && +formData.value.submitNums >= 1) {
        editReasonDialogShow.value = true;
        editReasonForm.value = {
            content: [],
            reason: [],
            detail: "",
        };
        // 获取词典
        const options = await useDict("contentCate", "reasonCate");
        contentCateOptions.value = options.contentCate;
        reasonCateOptions.value = options.reasonCate;
    }
};

const saveChange = async () => {
    if (!formData.value.ID) {
        return;
    }
    editReasonDialogShow.value = false;
    let status = await createLockRecordFun();
    if (!status) return;
    let submitForm = {};
    submitForm["ID"] = formData.value.ID;
    submitForm["notes"] = [];
    // 修改备注
    submitForm["notes"] = [
        {
            content: editReasonForm.value.content.join(","),
            reason: editReasonForm.value.reason.join(","),
            detail: editReasonForm.value.detail || "",
        },
    ];
    saveLoading.value = true;
    updateProductSpec(submitForm)
        .then((res) => {
            saveLoading.value = false;
            if (res.code === 0) {
                init();
                isEditing.value = false;
            }
        })
        .catch((err) => {
            saveLoading.value = false;
        });
};

// 重组提交树数据
const restSubmitTree = (tList1) => {
    const tList = deepClone2(tList1);
    const submitTree = [];
    let flag = false;
    let errStr = "";
    const idsList = [];
    for (let i = 0; i < tList.length; i++) {
        for (let j = 0; j < tList[i].children.length; j++) {
            const partsItem = tList[i].children[j]; // 配件
            // 校验是否存在未绑定尺码颜色的配件或者齋架
            if (
                (tList[i].label == "斋架" || tList[i].label == "齋架") &&
                partsItem.sizeListCheck.length == 0 &&
                partsItem.includedAngleList.length == 0
            ) {
                errStr = "存在未绑定尺码颜色的配件或齋架，不能提交";
                flag = true;
            } else if (
                tList[i].label == "配件" &&
                (partsItem.colorListCheck.length == 0 ||
                    (partsItem.includedAngleList.length == 0 &&
                        partsItem.sizeListCheck.length == 0))
            ) {
                errStr = "存在未绑定尺码颜色的配件或齋架，不能提交";
                flag = true;
            }
            if (!partsItem.unit) {
                errStr = "配件单位不能为空";
                flag = true;
            }
            if (
                !!partsItem.unit &&
                !["SH", "M", "KG"].includes(partsItem.unit) &&
                !partsItem.num
            ) {
                errStr = "单位为非SH、M、KG，数量不能为空";
                flag = true;
            }
            if (!partsItem.componentNum) {
                errStr = "配件编号为空不能提交";
                flag = true;
            }

            const sList = partsItem.sizeListCheck.map((size) => {
                return {
                    sizeNum: size,
                    isCheckLast: false,
                };
            });
            // 校验 主档编号+颜色编号+尺码小于或等于18位
            const obj = testStr1(partsItem.componentNum, partsItem.colorNum);
            if (obj) {
                errStr = obj.errStr;
                flag = obj.flag;
            }
            const item1 = {
                listOrder: partsItem.listOrder || 0,
                accessoryName: partsItem.label, // 配件名称
                orderType: partsItem.orderType, // 自制 || 外購
                componentNum: partsItem.componentNum, // 元件编号-主档编号
                colorNum: partsItem.colorNum, // 元件编号-颜色编号
                sizeNum: partsItem.sizeNum, // 尺码
                sapDesc: partsItem.sapDesc, // SAP物料说明
                appearanceSpec: partsItem.appearanceSpec, // 外观规格
                num: partsItem.num, // 数量
                unit: partsItem.unit, // unit
                groupDesc: partsItem.groupDesc, // 物料群组说明/编号
                group: partsItem.group, // 物料群组说明/编号
                note: partsItem.note ? partsItem.note.trim() : "", // 备注
                sizeList: sList, // 选定尺码列表
                colorList: partsItem.colorListCheck
                    ? [...partsItem.colorListCheck]
                    : [], // 选定尺码列表
                includedAngleList: partsItem.includedAngleList
                    ? [...partsItem.includedAngleList]
                    : [], // 夹角
                is_na: partsItem.is_na,
                styleNum: formData.value.styleNum, // 款式编号
                accessoryType: tList[i].label, // 齋架/配件
                level: "1",
                materialProperty: partsItem.materialProperty || "", // 材质属性
                workingProcedure: partsItem.workingProcedure || "", // 工序
                isSpleenMetalShare: partsItem.isSpleenMetalShare || "", // 是否辨别金胶共用
                moldStatus: partsItem.moldStatus || "", //
                isMoldAvailable: partsItem.isMoldAvailable || "", // 是否模具
                sapDelete: partsItem.sapDelete || 0, // 已汇入sap
            };
            if (partsItem.ID) {
                item1["ID"] = partsItem.ID;
                idsList.push(partsItem);
            }
            if (partsItem.children && partsItem.children.length > 0) {
                item1["children"] = [];
                partsItem.children.forEach((childItem) => {
                    // 校验 主档编号+颜色编号+尺码小于或等于18位
                    const obj = testStr1(
                        childItem.componentNum,
                        childItem.colorNum
                    );
                    if (obj) {
                        errStr = obj.errStr;
                        flag = obj.flag;
                    }
                    const item2 = {
                        listOrder: childItem.listOrder || 0,
                        accessoryName: childItem.label, // 配件名称
                        orderType: childItem.orderType, // 自制 || 外購
                        componentNum: childItem.componentNum, // 元件编号-主档编号
                        colorNum: childItem.colorNum, // 元件编号-颜色编号
                        sizeNum: childItem.sizeNum, // 尺码
                        sapDesc: childItem.sapDesc, // SAP物料说明
                        appearanceSpec: childItem.appearanceSpec, // 外观规格
                        num: childItem.num, // 数量
                        unit: childItem.unit, // unit
                        groupDesc: childItem.groupDesc, // 物料群组说明/编号
                        group: childItem.group, // 物料群组说明/编号
                        note: childItem.note ? childItem.note.trim() : "", // 备注
                        sizeList: [], // 选定尺码列表
                        colorList: [], // 选定尺码列表
                        includedAngleList: [], // 夹角
                        is_na: 0,
                        styleNum: formData.value.styleNum, // 款式编号
                        accessoryType: tList[i].label, // 齋架/配件
                        level: "2",
                        materialProperty: childItem.materialProperty || "", // 材质属性
                        workingProcedure: childItem.workingProcedure || "", // 工序
                        isSpleenMetalShare: childItem.isSpleenMetalShare || "", // 是否辨别金胶共用
                        moldStatus: childItem.moldStatus || "", //
                        isMoldAvailable: childItem.isMoldAvailable || "", // 是否模具
                        sapDelete: childItem.sapDelete || 0, //
                    };
                    if (!childItem.unit) {
                        errStr = "配件单位不能为空";
                        flag = true;
                    }
                    if (
                        !!childItem.unit &&
                        !["SH", "M", "KG"].includes(childItem.unit) &&
                        !childItem.num
                    ) {
                        errStr = "单位为非SH、M、KG，数量不能为空";
                        flag = true;
                    }
                    if (!childItem.componentNum) {
                        errStr = "配件编号为空不能提交";
                        flag = true;
                    }
                    if (childItem.ID) {
                        item2["ID"] = childItem.ID;
                        idsList.push(childItem);
                    }
                    // item1["parentId"] = childItem.ID;
                    item1["children"].push(item2);
                });
            }
            submitTree.push(item1);
        }
    }
    return { submitTree, flag, errStr, idsList };
};
// 颜色列表校验
const checkColorList = (list) => {
    let checkColorP = {};
    let checkColorP2 = {};
    let colorFlag = {
        flag: false,
        err: "",
    };
    list.forEach((res) => {
        // 客色号+客款号
        let str1 = res.customerColorNum + res.customerStyleNum;
        if (checkColorP[str1] &&res.customerColorNum && res.customerStyleNum ) {
            checkColorP[str1] = checkColorP[str1] + 1;
        } else {
            checkColorP[str1] = 1;
        }
        let str2 = res.localColorDesc || "";
        if (checkColorP2[str2] && str2 ) {
            checkColorP2[str2] = checkColorP2[str2] + 1;
        } else {
            checkColorP2[str2] = 1;
        }

        // let encoder = new TextEncoder();
        // let bytes = encoder.encode(str1).length;
        // 字节校验
        // 客色号+客款号 不能超过30字节 ， 一个汉字2个字节计算
        let bytes = getChars(str1);
        if (bytes > 30) {
            colorFlag.flag = true;
            colorFlag.err = "客色号+客款号不能超过30个字节";
        }
        // 本厂颜色描述
        let bytes2 = getChars(str2);
        if (bytes2 > 30) {
            colorFlag.flag = true;
            colorFlag.err = "本厂颜色描述不能超过30个字节";
        }
    });
    // 重复校验
    Object.keys(checkColorP).forEach((key) => {
        if (checkColorP[key] > 1) {
            colorFlag.flag = true;
            colorFlag.err = "客色号+客款号不能重复";
        }
    });
    Object.keys(checkColorP2).forEach((key2) => {
        if (checkColorP2[key2] > 1) {
            colorFlag.flag = true;
            colorFlag.err = "本厂颜色描述当前规格不能重复";
        }
    });
    return colorFlag;
};

// 保存按钮
const save = async (statusNum, editStatus) => {
    const t1Data = partSpecification1Ref.value.getTreeDataFun(); // 获取产品规格数据
    const t2Data = partSpecification2Ref.value.getTreeDataFun(); // 获取设计规格设计
    getTreeDataProduct(t1Data);
    getTreeDataDesign(t2Data);
    editReasonDialogShow.value = false;
    elFormRef.value?.validate(async (valid) => {
        if (!valid) return;
        let flag = false; // 判断是否存在没有绑定颜色尺码的齋架和配件
        let errStr = "";
        const submitForm = Object.assign({}, formData.value);
        if (hasSameValue(eyeSizeData.value)) {
            // ElMessage({
            //     type: "error",
            //     offset: "25",
            //     message: "不能输入相同尺码,且不能为空",
            // });
            ElNotification({
                title: "不能输入相同尺码,且不能为空",
                type: "error",
                position: "bottom-left",
                customClass: "notification-item-err",
            });
            return;
        }
        if (
            statusNum == "1" &&
            submitForm["frameMaterials"] == "中金架" &&
            !submitForm["metalFrameCate"]
        ) {
            ElNotification({
                title: "中金架类必填",
                type: "error",
                position: "bottom-left",
                customClass: "notification-item-err",
            });
            return;
        }

        submitForm["notes"] = [];
        // 修改备注
        if (editStatus == "edit") {
            submitForm["notes"] = [
                {
                    content: editReasonForm.value.content.join(","),
                    reason: editReasonForm.value.reason.join(","),
                    detail: editReasonForm.value.detail || "",
                },
            ];
        }
        // 尺码
        submitForm["sizes"] = eyeSizeData.value
            .filter((res) => {
                return res.sizeNum;
            })
            .map((item, index) => {
                const obj = { ...item };
                obj["styleNum"] = formData.value.styleNum;
                return obj;
            });
        // 眼型脾型
        submitForm["eyespleens"] = yanPiDataList.value.map((item) => {
            if (!item.sizeNum) {
                flag = true; // 判断是否存在没有绑定颜色尺码的齋架和配件
                errStr = "眼型脾型关联尺码不能为空";
            }
            const obj = { ...item };
            obj["styleNum"] = formData.value.styleNum;
            return obj;
        });
        // 颜色 --- 产品规格
        let isSalesNum = ["LEVIS", "levis", "fila", "FILA"].includes(
            formData.value.customerBrand
        );
        submitForm["colors"] = eyeColorData1.value.map((item) => {
            const obj = { ...item };
            if (isSalesNum) {
                obj["salesNum"] = item.salesNum ? item.salesNum : [];
            }
            obj["styleNum"] = formData.value.styleNum;
            return obj;
        });
        let colorFlag1 = checkColorList(eyeColorData1.value);
        if (colorFlag1.flag) {
            ElNotification({
                title: "产品规格：" + colorFlag1.err,
                type: "error",
                position: "bottom-left",
                duration: 0,
                customClass: "notification-item-err",
            });
            return;
        }
        // 颜色 --- 设计规格
        submitForm["designColors"] = eyeColorData2.value.map((item) => {
            const obj = { ...item };
            if (isSalesNum) {
                obj["salesNum"] = item.salesNum ? item.salesNum : [];
            }
            obj["styleNum"] = formData.value.styleNum;
            return obj;
        });
        // let colorFlag2 = checkColorList(eyeColorData2.value);
        // if (colorFlag2.flag) {
        //     ElNotification({
        //         title: "设计规格：" + colorFlag2.err,
        //         type: "error",
        //         position: "bottom-left",
        //         duration: 0,
        //         customClass: "notification-item-err",
        //     });
        //     return;
        // }
        // 标志/图案工艺说明  --- 产品规格
        let signsFlag = false;
        submitForm["signs"] = designSpecificationsRef1.value.signsTableData.map(
            (item) => {
                const obj = { ...item };
                if (!item.workmanship) signsFlag = true;
                obj["styleNum"] = formData.value.styleNum;
                return obj;
            }
        );
        // 标志/图案工艺说明  --- 设计规格
        submitForm["designSigns"] =
            designSpecificationsRef2.value.signsTableData.map((item) => {
                const obj = { ...item };
                // if (!item.workmanship) signsFlag = true;
                obj["styleNum"] = formData.value.styleNum;
                return obj;
            });
        if (signsFlag && statusNum == "1") {
            // ElMessage({
            //     type: "error",
            //     offset: "25",
            //     message: "标志、图案工艺说明中工艺不能为空",
            // });
            ElNotification({
                title: "标志、图案工艺说明中工艺不能为空",
                type: "error",
                position: "bottom-left",
                duration: 0,
                customClass: "notification-item-err",
            });
            return;
        }
        // 测试标准
        submitForm["tests"] = testStandardRef.value.testStandardData1.map(
            (item) => {
                const obj = {
                    testName: item.testName, // 测试项目名称
                    isReport: JSON.stringify(item.iscsCheck), // 是否需要测试报告
                    styleNum: formData.value.styleNum, // 款式编号,
                };
                if (item.ID) obj["ID"] = item.ID;
                return obj;
            }
        );
        // 配件规格清单提交数据重组
        // ----- 镜架材质为非胶非脾时，必须应该有齋架存在 start -----
        // const len1 = treeData2Product.value[0].children?.length;
        // const len2 = treeData2Design.value[0].children?.length;
        // if (
        //     statusNum == "1" &&
        //     len1 == 0 &&
        //     len2 == 0 &&
        //     submitForm["frameMaterials"] != "膠架" &&
        //     submitForm["frameMaterials"] != "胶架" &&
        //     submitForm["frameMaterials"] != "啤架"
        // ) {
        //     ElNotification({
        //         title: "镜架材质为非胶非脾时，必须有齋架",
        //         type: "error",
        //         position: "bottom-left",
        //         customClass: "notification-item-err",
        //     });
        //     return;
        // }
        // ----- 镜架材质为非胶非脾时，必须应该有齋架存在 end -----
        // 配件规格清单 -- 产品规格 start-----
        let submitTree1 = [];
        // 单色单码自动关联
        if (submitForm.colors?.length == 1 && submitForm.sizes?.length == 1) {
            treeData2Product.value[0].children.map((item1) => {
                item1["sizeListCheck"] = [submitForm.sizes[0].sizeNum];
                return item1;
            });
            treeData2Product.value[1].children.map((item2) => {
                item2["sizeListCheck"] = [submitForm.sizes[0].sizeNum];
                item2["colorListCheck"] = [submitForm.colors[0].colorNum];
                return item2;
            });
        }
        // 规格清单数据重组
        const objProduct = restSubmitTree(treeData2Product.value);
        submitTree1 = objProduct.submitTree;
        let flag1 = false;
        flag1 = objProduct.flag;
        const errStr1 = "产品规格-配件清单:" + objProduct.errStr;
        if (
            submitTree1.length > 0 &&
            statusNum == "1" &&
            eyeColorData1.value.length == 0
        ) {
            // ElMessage({
            //     type: "error",
            //     offset: "25",
            //     message: "存在未绑定颜色尺码不能提交",
            // });
            ElNotification({
                title: "产品规格-存在未绑定颜色尺码不能提交",
                type: "error",
                position: "bottom-left",
                duration: 0,
                customClass: "notification-item-err",
            });
            return;
        }
        submitForm["accessorySpecs"] = submitTree1 || [];
        // 产品规格--已关联颜色尺码
        let accessorySpecsConnect = submitForm.accessorySpecs.filter((res) => {
            if (res.accessoryType == "斋架" || res.accessoryType == "齋架") {
                return res.sizeList.length == 0;
            }
            if (res.accessoryType == "配件") {
                return res.sizeList.length == 0 || res.colorList.length == 0;
            }
        });
        if (
            submitForm.colors?.length > 0 &&
            submitForm.accessorySpecs?.length > 0 &&
            accessorySpecsConnect?.length == 0
        ) {
            submitForm["isCorrelateColorAndSize"] = "1";
        } else {
            submitForm["isCorrelateColorAndSize"] = "0";
        }
        // 配件规格清单 -- 产品规格 end-----
        // 配件规格清单 -- 设计规格 start-----
        let submitTree2 = [];
        // 单色单码自动关联
        if (
            submitForm.designColors?.length == 1 &&
            submitForm.sizes?.length == 1
        ) {
            treeData2Design.value[0].children.map((item1) => {
                item1["sizeListCheck"] = [submitForm.sizes[0].sizeNum];
                return item1;
            });
            treeData2Design.value[1].children.map((item2) => {
                item2["sizeListCheck"] = [submitForm.sizes[0].sizeNum];
                item2["colorListCheck"] = [submitForm.designColors[0].colorNum];
                return item2;
            });
        }
        const objDesign = restSubmitTree(treeData2Design.value, "related");
        submitTree2 = objDesign.submitTree;
        let flag2 = false;
        flag2 = objDesign.flag;
        const errStr2 = "设计规格-配件清单:" + objDesign.errStr;
        // if (flag2 && flag1 && statusNum == "1") {
        //     ElNotification({
        //         title: errStr2,
        //         type: "error",
        //         position: "bottom-left",
        //         customClass: "notification-item-err",
        //     });
        //     return;
        // }
        // if (!flag1 && flag2 && statusNum == "1") {
        //     ElNotification({
        //         title: errStr2,
        //         type: "error",
        //         position: "bottom-left",
        //         customClass: "notification-item-err",
        //     });
        //     return;
        // }
        // if (flag1 && !flag2 && statusNum == "1") {
        //     ElNotification({
        //         title: errStr1,
        //         type: "error",
        //         position: "bottom-left",
        //         customClass: "notification-item-err",
        //     });
        //     return;
        // }
        if (flag1 && statusNum == "1") {
            ElNotification({
                title: errStr1,
                type: "error",
                position: "bottom-left",
                customClass: "notification-item-err",
            });
            return;
        }

        submitForm["designAccessorySpecs"] = submitTree2 || [];
        // 产品规格--已关联颜色尺码
        let designAccessorySpecsConnect =
            submitForm.designAccessorySpecs.filter((res) => {
                if (
                    res.accessoryType == "斋架" ||
                    res.accessoryType == "齋架"
                ) {
                    return res.sizeList.length == 0;
                }
                if (res.accessoryType == "配件") {
                    return (
                        res.sizeList.length == 0 || res.colorList.length == 0
                    );
                }
            });
        if (
            submitForm.designColors?.length > 0 &&
            submitForm.designAccessorySpecs?.length > 0 &&
            designAccessorySpecsConnect?.length == 0
        ) {
            submitForm["designIsCorrelateColorAndSize"] = "1";
        } else {
            submitForm["designIsCorrelateColorAndSize"] = "0";
        }
        // 配件规格清单 -- 设计规格 end-----

        // console.log("submitForm", submitForm);

        // 状态
        submitForm["status"] = statusNum;
        if (statusNum == "0") {
            saveLoading.value = true;
        } else {
            submitLoading.value = true;
        }
        switch (type.value) {
            case "create":
                createProductSpec(submitForm)
                    .then((res) => {
                        saveLoading.value = false;
                        submitLoading.value = false;
                        if (res.code === 0) {
                            // ElMessage({
                            //     type: "success",
                            //     message: "创建成功",
                            // });
                            ElNotification({
                                title: "创建成功",
                                type: "success",
                                position: "bottom-left",
                                customClass: "notification-item-success",
                            });
                            // 初始化表单
                            elFormRef.value?.resetFields();
                            eyeSizeData.value = [];
                            yanPiDataList.value = [];
                            eyeColorData1.value = [];
                            eyeColorData2.value = [];
                            designSpecificationsRef1.value.updateSignsData([]);
                            designSpecificationsRef2.value.updateSignsData([]);
                            testStandardRef.value.updateTestStandard([]);
                            let treed = [
                                {
                                    label: "齋架",
                                    cate: "title1",
                                    children: [],
                                },
                                {
                                    label: "配件",
                                    cate: "title1",
                                    children: [],
                                },
                            ];
                            emitter.emit("updateColorData");
                            partSpecification1Ref.value.updateTreeData(
                                deepClone2(treed)
                            );
                            partSpecification2Ref.value.updateTreeData(
                                deepClone2(treed)
                            );

                            emitter.emit("closeThisPage");
                            router.push({
                                path: `/layout/productSpecAdd`,
                                query: {
                                    styleNum: submitForm.styleNum,
                                    subTitle: "产" + submitForm.styleNum,
                                },
                            });
                        }
                    })
                    .catch((err) => {
                        saveLoading.value = false;
                        submitLoading.value = false;
                    });
                break;
            case "update":
                updateProductSpec(submitForm)
                    .then((res) => {
                        saveLoading.value = false;
                        submitLoading.value = false;
                        if (res.code === 0) {
                            // ElMessage({
                            //     type: "success",
                            //     message: "更新成功",
                            // });
                            ElNotification({
                                title: "更新成功",
                                type: "success",
                                position: "bottom-left",
                                customClass: "notification-item-success",
                            });
                            if (editStatus == "edit") {
                                isEditing.value = false;
                            }
                            if (statusNum == "0") {
                                init();
                            } else {
                                deleteLockRecordFun();
                                isEditing.value = true;
                                isEditProductTab.value = true;
                                isEditDesignTab.value = true;
                                tabsValue1.value = "tabsValue1a";
                                tabsValue2.value = "tabsValue2a";
                                tabsValue3.value = "tabsValue3a";
                                emitter.emit("closeThisPage", {
                                    path: "/layout/productSpec",
                                });
                            }
                        }
                    })
                    .catch((err) => {
                        saveLoading.value = false;
                        submitLoading.value = false;
                    });
                break;
            default:
                break;
        }
    });
};
// 创建起模通知单
const moldStartNoticeAdd = () => {
    router.push({
        path: "/layout/moldStartNoticeAdd",
        query: { styleNum: formData.value.styleNum },
    });
};
// 修改起模通知单
const moldStartNoticeEdit = (item) => {
    router.push({
        path: "/layout/moldStartNoticeAdd",
        query: { ID: item.ID, subTitle: item.noticeNum },
    });
};

// 后端路径
const path1 = ref(import.meta.env.VITE_BASE_API + "/");

const xToken = localStorage.getItem("token");

// 下载
const downloadFile = (row) => {
    let params = {
        drawingName: row.drawingName,
        fileUrl: row.fileUrl,
    };
    downloadFilePost(params).then((data) => {
        if (data.response && data.response.status == 404) {
            ElMessage({
                type: "warning",
                message: "文件不存在",
            });
            return;
        }
        let blob = new Blob([data.data], {});
        const fileName = row.drawingName;
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // 下载完成移除元素
        window.URL.revokeObjectURL(url); // 释放掉blob对象
    });

    // let fileUrl;
    // let name = row.fileUrl.split("/")[row.fileUrl.split("/").length - 1];
    // if (
    //     row.fileUrl.indexOf("http://") > -1 ||
    //     row.fileUrl.indexOf("https://") > -1
    // ) {
    //     fileUrl = row.fileUrl.replace(new RegExp("#", "g"), "");
    // } else {
    //     fileUrl = path1.value + row.fileUrl.replace(new RegExp("#", "g"), "");
    // }
    // const x = new XMLHttpRequest();
    // x.open("GET", fileUrl, true);
    // x.responseType = "blob";
    // x.onload = (e) => {
    //     let { status, readyState } = x;
    //     if (status === 200 && readyState === 4) {
    //         // 会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
    //         const url = window.URL.createObjectURL(x.response);
    //         const a = document.createElement("a");
    //         a.href = url;
    //         a.download = name.replace(new RegExp("#", "g"), "");
    //         a.click();
    //     } else {
    //         if (status === 404) {
    //             ElMessage({
    //                 type: "warning",
    //                 message: "文件不存在",
    //             });
    //         } else {
    //             ElMessage({
    //                 type: "warning",
    //                 message: "下载出错",
    //             });
    //         }
    //     }
    // };
    // x.send();
};

// 复制颜色
const copyColor = (type) => {
    // 颜色
    if (type == "colors1") {
        const eyeColorData1Copy = deepClone2(eyeColorData2.value);
        eyeColorData1.value = eyeColorData1Copy.map((item) => {
            if (item.sapImported) item.sapImported = 0;
            if (item.ID) delete item.ID;
            return item;
        });
    } else if (type == "colors2") {
        const eyeColorData2Copy = deepClone2(eyeColorData1.value);
        eyeColorData2.value = eyeColorData2Copy.map((item) => {
            if (item.sapImported) item.sapImported = 0;
            if (item.ID) delete item.ID;
            return item;
        });
    }
    setTimeout(() => {
        emitter.emit("updateColorData");
    }, 0);
};

const copyPartDialogShow = ref(false); // 复制选择弹窗
const copyPartData = ref([]); // 复制选择内容
const currentPartSpecification = ref("");
// 复制配件规格清单
const copyPartSpecification = (type) => {
    copyPartDialogShow.value = true;
    // 产品规格 -- 设计规格
    currentPartSpecification.value = type;
    // 从设计规格复制到产品规格
    if (type == "partSpecification1") {
        const data = partSpecification2Ref.value.getTreeDataFun();
        getTreeDataDesign(data);
        setTimeout(() => {
            const t2Data = deepClone2(treeData2Design.value);
            const eyeColorData1Copy = deepClone2(eyeColorData1.value);
            // 去除不存在的颜色
            t2Data[1].children.forEach((p) => {
                p.colorListCheck = p.colorListCheck.filter((c) => {
                    let index = eyeColorData1Copy.findIndex((cItem) => {
                        return cItem.colorNum == c;
                    });
                    return index != -1;
                });
            });
            delTreeID(t2Data);
            copyPartData.value = deepClone2(t2Data);
            copyPartData.value.forEach((row, index) => {
                row.children.forEach((part) => {
                    part["accessoryType"] = index == 0 ? "齋架" : "配件";
                    part["partLevel"] = 1;
                    part["checked"] = true;
                });
            });
        }, 300);
    } else if (type == "partSpecification2") {
        // 从产品规格复制到设计规格
        const data = partSpecification1Ref.value.getTreeDataFun();
        getTreeDataProduct(data);
        setTimeout(() => {
            const t2Data = deepClone2(treeData2Product.value);
            const eyeColorData2Copy = deepClone2(eyeColorData2.value);
            // 去除不存在的颜色
            t2Data[1].children.forEach((p) => {
                p.colorListCheck = p.colorListCheck.filter((c) => {
                    let index = eyeColorData2Copy.findIndex((cItem) => {
                        return cItem.colorNum == c;
                    });
                    return index != -1;
                });
            });
            delTreeID(t2Data);
            copyPartData.value = deepClone2(t2Data);
            copyPartData.value.forEach((row, index) => {
                row.children.forEach((part) => {
                    part["accessoryType"] = index == 0 ? "齋架" : "配件";
                    part["partLevel"] = 1;
                    part["checked"] = true;
                });
            });
        }, 300);
    }
};
// 复制确定
const copyPartDialogConfirm = () => {
    let partList = [];
    copyPartData.value.forEach((item) => {
        item.children.forEach((part) => {
            if (part.checked) {
                part["checked"] = false;
                partList.push(part);
            }
        });
    });
    if (currentPartSpecification.value == "partSpecification1") {
        partSpecification1Ref.value.addCopyPart(partList, "partSpecification1");
    } else if (currentPartSpecification.value == "partSpecification2") {
        partSpecification2Ref.value.addCopyPart(partList);
    }
    copyPartDialogShow.value = false;
};

// 复制标志/图案工艺说明
const copyDesignSpecifications = (type) => {
    if (type == "designSpecifications1") {
        const signsTableData2Copy = deepClone2(
            designSpecificationsRef2.value.signsTableData
        );
        const signsTableData1Copy = signsTableData2Copy.map((item) => {
            if (item.ID) delete item.ID;
            if (item.workmanshipType && item.workmanshipType == "New") {
                item.workmanshipType = "Old";
            }
            return item;
        });
        setTimeout(() => {
            designSpecificationsRef1.value.updateSignsData(signsTableData1Copy);
        }, 0);
    } else if (type == "designSpecifications2") {
        const signsTableData1Copy = deepClone2(
            designSpecificationsRef1.value.signsTableData
        );
        const signsTableData2Copy = signsTableData1Copy.map((item) => {
            if (item.workmanshipType && item.workmanshipType == "New") {
                item.workmanshipType = "Old";
            }
            if (item.ID) delete item.ID;
            return item;
        });
        setTimeout(() => {
            designSpecificationsRef2.value.updateSignsData(signsTableData2Copy);
        }, 0);
    }
};

const reload = ref(false);
const reloadPage = () => {
    reload.value = true;
    emitter.emit("reload");
    setTimeout(() => {
        reload.value = false;
    }, 500);
};

// 复制产品规格
// 获取款式列表
const productStylesListCopy = ref([]);
const remoteMethodProjectStylesCopy = (keyword) => {
    getProductSpecList(
        {
            page: 1,
            pageSize: 50,
            styleNum: keyword || undefined,
        },
        true
    ).then((res) => {
        if (res.code == 0) {
            productStylesListCopy.value = res.data.list;
        }
    });
};
const fromStyleNum = ref("");
const copySpecificationShow = ref(false);
const copySpecificationFun = (row) => {
    copySpecificationShow.value = true;
    fromStyleNum.value = "";
};

// 复制产品规格
const replicateProductSpecFun = () => {
    if (!fromStyleNum.value) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "请选择款式编号",
        // });
        ElNotification({
            title: "请选择款式编号",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    const params = {
        fromStyleNum: fromStyleNum.value,
        toStyleNum: formData.value.styleNum,
    };
    replicateProductSpec(params)
        .then((res) => {
            copySpecificationShow.value = false;
            if (res.code == 0) {
                // ElMessage({
                //     type: "success",
                //     message: "复制成功",
                // });
                ElNotification({
                    title: "复制成功",
                    type: "success",
                    position: "bottom-left",
                    customClass: "notification-item-success",
                });
            }
            init();
        })
        .catch((err) => {
            copySpecificationShow.value = true;
        });
};

// 代客确认图纸
const confirmDrawingShow = ref(false);
const confirmDrawingDate = ref("");
const confirmDrawingFun = () => {
    if (!confirmDrawingDate.value) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "请选择日期",
        // });
        ElNotification({
            title: "请选择日期",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    verifyProductSpec({
        styleNum: formData.value.styleNum,
        ID: formData.value.ID + "",
        verifyTime: confirmDrawingDate.value,
    })
        .then((res) => {
            confirmDrawingShow.value = false;
            if (res.code == 0) {
                // ElMessage({ type: "success", message: "操作成功" });
                ElNotification({
                    title: "操作成功",
                    type: "success",
                    position: "bottom-left",
                    customClass: "notification-item-success",
                });
                formData.value["verifyTime"] = confirmDrawingDate.value;
            }
        })
        .catch((err) => {
            confirmDrawingShow.value = false;
        });
};

// 款式查询弹窗
const styleNumDialogShow = ref(false);
// 打开 新增、编辑
const openCreateAndEdit = () => {
    styleNumDialogShow.value = true;
};

// 关闭款式查询弹窗
function closeDialog(params) {
    styleNumDialogShow.value = false;
}

function selectStyleNum(params) {
    formData.value.styleNum = params.styleNum;
    //   productStylesChange();
    productStylesUpdate(params);
    testStandardRef.value.updateTest();
    styleNumDialogShow.value = false;
}

const flagNum = ref(0);
onMounted(async () => {
    if (route.query.isView) {
        isViewOp.value = route.query.isView == 1;
    }

    // getSbuData();
    if (route.query.styleNum) {
        isEditing.value = true;
        findLockRecordFun();
    } else {
        isEditing.value = false;
    }
    flagNum.value = 0;
    emitter.on("removeLock", (query) => {
        flagNum.value++;
        console.log("关闭", flagNum.value);
        if (
            formData.value.styleNum &&
            query &&
            query.styleNum == formData.value.styleNum &&
            !isEditing.value &&
            flagNum.value == 1
        ) {
            deleteLockRecordFun();
            isEditing.value = true;
            isEditProductTab.value = true;
            isEditDesignTab.value = true;
            tabsValue1.value = "tabsValue1a";
            tabsValue2.value = "tabsValue2a";
            tabsValue3.value = "tabsValue3a";
        }
    });
    // 获取永久自制外购配件
    getSelfmadeOutsourceSettingList({ page: 1, pageSize: 300 }).then((res) => {
        if (res.code === 0) {
            frameList2.value = res.data.list.map((item) => {
                return {
                    text: item.accessoryName,
                    value: item.accessoryName,
                    slefmadeOrOutsource: item.slefmadeOrOutsource,
                    num: 1,
                };
            });
        }
    });
    init("once");
    const dict = await useDict(
        "sheetArcBend", // 片弧度
        "metalFrameCate", // 中金架类
        "position", // 位置
        "workmanship", // 工艺
        "newOrOld", // 新旧
        "unit" // 单位
    );
    // 获取单位
    dictOptions.value = Object.assign(dictOptions.value, dict);
    // 获取拖拽元素
    nextTick(() => {
        robot.value = document.getElementById("gva-base-load-dom");
    });
});
onUnmounted(() => {
    // console.log("onUnmounted",formData.value.styleNum)
    if (!isEditing.value && formData.value.styleNum) {
        deleteLockRecordFun();
    }
});

const pageLocked = ref(false);
const editUser = ref("");
const selfEidt = ref(false);
// 解锁页面
const deleteLockRecordFun = (tip) => {
    deleteLockRecord({ recordNum: formData.value.styleNum }).then((res) => {
        if (res.code == 0) {
            pageLocked.value = false;
            selfEidt.value = false;
            if (tip == "1") {
                ElNotification({
                    title: "解锁成功",
                    type: "success",
                    position: "bottom-left",
                    customClass: "notification-item-success",
                });
            }
        }
    });
};
// 锁定页面
const createLockRecordFun = () => {
    return new Promise(function (resolve, reject) {
        createLockRecord({ status: 1, recordNum: formData.value.styleNum })
            .then((res) => {
                if (res.code == 0) {
                    selfEidt.value = true;
                    resolve(true);
                } else {
                    reject(false);
                }
            })
            .catch((err) => {
                reject(false);
            });
    });
};
// 查询已锁
const findLockRecordFun = () => {
    editUser.value = "";
    selfEidt.value = false;
    findLockRecord({ recordNum: route.query.styleNum }).then((res) => {
        if (res.code == 0) {
            if (
                res.data.relockRecord &&
                res.data.relockRecord.lockuser.ID != userStore.userInfo.ID
            ) {
                pageLocked.value = true;
                editUser.value = res.data.relockRecord.lockuser.nickName;
            } else {
                pageLocked.value = false;
            }
            if (
                res.data.relockRecord &&
                res.data.relockRecord.lockuser.ID == userStore.userInfo.ID
            ) {
                selfEidt.value = true;
            }
        }
    });
};
const activatedNum = ref(0);

// 预览-----------------------------------------------------------------------------------------------------------
function getPrintStyle() {
    return `@page{marign:0;padding:0;}
 .one-box {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	padding-bottom: 6px;
	border-bottom: 2px solid rgb(240, 240, 240);
}
.one-box > div {
    font-size: 18px !important;
	text-align: left;
	width: 33.33%;
}
.one-box > div:last-child {
	margin-top: 10px;
	text-align: right;
}
.one-box .ftsz10px {
	font-size: 8px !important;
}
.content-box {
	margin-top: 4px;
}
.content-box .title {
	margin-bottom: 4px;
	font-size: 8px;
	font-weight: bold;
}
.content-box .content {
	border-top: 2px solid rgb(240, 240, 240);
	border-bottom: 2px solid rgb(240, 240, 240);
	padding: 10px 0 0px;
}
.content-box .content .descriptions {
	display: flex;
	flex-wrap: wrap;
	font-size: 6px !important;
}
.content-box .content .descriptions .descriptionsItem {
	width: 25%;
	margin-bottom: 2px;
	font-size: 6px !important;
}
.content-box .content .descriptions .addLine {
	margin-bottom: 2px;
	width: 100%;
	font-size: 6px !important;
}
.content-box .content .myTable-head {
	display: flex;
	justify-content: space-around;
	text-align: left;
	padding-bottom: 2px;
	border-bottom: 3px solid rgb(240, 240, 240);
}
.content-box .content .myTable-head > div {
	flex: 4;
	font-size: 6px !important;
}
.content-box .content .myTable-head > div:first-child {
	flex: 2;
}
.content-box .content .myTable-head > div:nth-child(3) {
	flex: 2;
}
.content-box .content .myTable-content {
	display: flex;
	justify-content: space-around;
	text-align: left;
	margin-top: 1px;
	padding-bottom: 1px;
	border-bottom: 1px solid rgb(240, 240, 240);
}
.content-box .content .myTable-content > div {
	flex: 4;
	font-size: 6px !important;
	padding: 0 2px;
}
.content-box .content .myTable-content > div:first-child {
	flex: 2;
}
.content-box .content .myTable-content > div:nth-child(2) {
	flex: 2;
}
.content-box .content .myTable-content > div:nth-child(3) {
	flex: 2;
}
.content-box .content .myTable-content:last-child {
	border-bottom: 0px solid rgb(240, 240, 240);
}
.table1 .myTable-head > div,
.table1 .myTable-content > div {
	flex: 10 !important;
}
.table1 .myTable-head > div:first-child,
.table1 .myTable-content > div:first-child {
	flex: 2 !important;
}
.table1 .myTable-head > div:nth-child(2),
.table1 .myTable-content > div:nth-child(2) {
	flex: 9 !important;
}
.table1 .myTable-head > div:nth-child(3),
.table1 .myTable-content > div:nth-child(3) {
	flex: 12 !important;
}
.table2 .myTable-head > div,
.table2 .myTable-content > div {
	flex: 10 !important;
	word-break: break-all;
}
.table2 .myTable-head > div:first-child,
.table2 .myTable-content > div:first-child {
	flex: 10 !important;
}
.table2 .myTable-head > div:nth-child(2),
.table2 .myTable-content > div:nth-child(2) {
	flex: 4 !important;
}
.table2 .myTable-head > div:nth-child(5),
.table2 .myTable-content > div:nth-child(5) {
	flex: 4 !important;
}
.table2 .myTable-head > div:nth-child(6),
.table2 .myTable-content > div:nth-child(6) {
	flex: 4 !important;
}
.table2 .myTable-head > div:nth-child(7),
.table2 .myTable-content > div:nth-child(7) {
	flex: 4 !important;
}
.table3 .myTable-head > div,
.table3 .myTable-content > div {
	flex: 10 !important;
}
.table3 .myTable-head > div:first-child,
.table3 .myTable-content > div:first-child {
	flex: 5 !important;
}
.table3 .myTable-head > div:nth-child(2),
.table3 .myTable-content > div:nth-child(2) {
	flex: 5 !important;
}
.table3 .myTable-head > div:nth-child(3),
.table3 .myTable-content > div:nth-child(3) {
	flex: 5 !important;
}
.table3 .myTable-head > div:nth-child(4),
.table3 .myTable-content > div:nth-child(4) {
	flex: 15 !important;
}
.table3 .myTable-head > div:nth-child(5),
.table3 .myTable-content > div:nth-child(5) {
	flex: 3 !important;
}
.table3 .myTable-head > div:nth-child(6),
.table3 .myTable-content > div:nth-child(6) {
	flex: 6 !important;
}
.table3 .myTable-head > div:nth-child(7),
.table3 .myTable-content > div:nth-child(7) {
	flex: 10 !important;
}
.table3 .myTable-head > div:nth-child(8),
.table3 .myTable-content > div:nth-child(8) {
	flex: 5 !important;
}
.table4 .myTable-head > div,
.table4 .myTable-content > div {
	flex: 10 !important;
}
.table4 .myTable-head > div:first-child,
.table4 .myTable-content > div:first-child {
	flex: 8 !important;
}
.table4 .myTable-head > div:nth-child(2),
.table4 .myTable-content > div:nth-child(2) {
	flex: 8 !important;
}
.table4 .myTable-head > div:nth-child(3),
.table4 .myTable-content > div:nth-child(3) {
	flex: 14 !important;
}
  `;
}
const previewDialogShow = ref(false);
const witchPreview = ref("product");
const printPartTableData = ref([]);
const signTableData = ref([]);
const testStandardDocumentListData = ref([]);
// 打印
const print = (whichSpec, flag) => {
    productSpecPrint({
        ID: formData.value.ID,
        whichSpec: witchPreview.value,
    }).then((res) => {
        const fileUrl = path1.value + res.data.fileUrl;
        if (!fileUrl) return;

        const link = document.createElement("a");
        link.href = fileUrl;
        const name =
            res.data.fileUrl.split("/")[res.data.fileUrl.split("/").length - 1];
        link.setAttribute("download", name);
        link.click();
    });
};

// 预览
const previewSpec = (type) => {
    witchPreview.value = type;
    printPartTableData.value = [];

    const t1Data = partSpecification1Ref.value.getTreeDataFun(); // 获取产品规格数据
    const t2Data = partSpecification2Ref.value.getTreeDataFun(); // 获取设计规格设计
    // console.log(t1Data,t2Data);
    if (type == "product") {
        addLevelField(t1Data.treeData);
        signTableData.value = designSpecificationsRef1.value.signsTableData;
        testStandardDocumentListData.value =
            testStandardRef.value.testStandardData1.map((item) => {
                const obj = {
                    testName: item.testName, // 测试项目名称
                    isReport: JSON.stringify(item.iscsCheck), // 是否需要测试报告
                    styleNum: formData.value.styleNum, // 款式编号,
                };
                if (item.ID) obj["ID"] = item.ID;
                return obj;
            });
    } else if (type == "design") {
        addLevelField(t2Data.treeData);
        signTableData.value = designSpecificationsRef2.value.signsTableData;
    }

    previewDialogShow.value = true;
};

function closePreview(params) {
    previewDialogShow.value = false;
}

// 给树中增加层级字段并变成数组
function addLevelField(tree, selfLevel = 1) {
    for (let node of tree) {
        if (node) {
            node.selfLevel = selfLevel; // 在节点上添加selfLevel字段
            printPartTableData.value.push(node);
            if (node.children && node.children.length > 0) {
                addLevelField(node.children, selfLevel + 1); // 递归处理子节点
            }
        }
    }
    return tree; // 返回处理后的树
}

onActivated(async () => {
    activatedNum.value++;
    flagNum.value = 0;
    // console.log("aaa", flagNum.value);
    if (route.query.styleNum) {
        findLockRecordFun();
    }
    if (route.query.styleNum && activatedNum.value > 1) {
        pageLoaing.value = true;
        type.value = "update";
        findProductSpec({ styleNum: route.query.styleNum })
            .then((res) => {
                pageLoaing.value = false;
                if (res.code === 0) {
                    Object.keys(formData.value).forEach((key) => {
                        formData.value[key] = res.data.reproductSpec[key];
                    });
                    formData.value["status"] = res.data.reproductSpec.status;
                    formData.value["moldStartNotice"] =
                        res.data.reproductSpec.moldStartNotice;
                    // 历史备注
                    historyNoteTableData.value = res.data.notes
                        ? res.data.notes
                        : [];
                    // 获取款式资讯信息，更新相关信息
                    if (formData.value.styleNum) {
                        let oldCustomerStyleNum =
                            formData.value.customerStyleNum;
                        findProductStyles({
                            styleNum: formData.value.styleNum,
                        }).then((res) => {
                            const m = res.data.reproductStyles;
                            productStylesUpdate(m);
                            if (m.customerStyleNum != oldCustomerStyleNum) {
                                setTimeout(() => {
                                    colorList1Ref.value?.updateBaseData();
                                    colorList2Ref.value?.updateBaseData();
                                }, 400);
                            }
                        });
                    }
                }
            })
            .catch((err) => {
                pageLoaing.value = false;
            });
    }
});
</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");
.form-footer {
    text-align: center;
}

:deep(.table-form) {
    .el-form-item {
        margin-bottom: 0;
        width: 80%;
    }

    .table-title {
        margin-bottom: 5px;
        margin-top: 5px;
        font-size: 16px;
    }
}
:deep(.el-collapse-item) {
    margin-top: 10px;
}
:deep(.el-collapse-item__header) {
    background: #ccc6;
    padding: 0 20px;
    font-weight: 700;
    font-size: 16px;
    height: 36px;
}
.image-icon {
    color: blue;
    margin-left: 10px;
    cursor: pointer;
}
:deep(.el-tabs--border-card > .el-tabs__content) {
    padding: 0;
}
:deep(.el-tabs--border-card) {
    border: none;
}
:deep(.el-tabs__nav) {
    border-left: 1px solid #e4e7ed;
}

.custom-tabs-label {
    padding: 0 20px;
    color: #999;
    line-height: 40px;
}
.custom-tabs-label-isEdit {
    background: var(--el-color-primary);
    color: #fff;
}
.collapse-items {
    :deep(.el-collapse-item__header) {
        position: relative;
    }
    .collapse-left {
        position: absolute;
        top: -6px;
        right: 46px;
        font-weight: 500;
    }
}
.tabs-box {
    :deep(.el-tabs__header .el-tabs__item) {
        padding: 0 !important;
    }
}
.table-title-btn {
    :deep(.el-button.is-disabled) {
        background: #ced0d8;
    }
}
:deep(.el-table td) {
    // padding: 2px 2px;
}
:deep(.el-select__wrapper) {
    padding: 0px 4px;
    min-height: 24px;
}
:deep(.el-form-item) {
    margin-bottom: 8px;
}
:deep(.el-select__input) {
    // height: 24px;
    // line-height: 18px;
}
.copy-part-dialog {
    :deep(.el-table__expand-icon) {
        display: none;
    }
    :deep(.el-table__row--level-2) {
        display: none;
    }
    :deep(.el-table__placeholder) {
        display: none;
    }
}
</style>

<style lang="scss" scoped>
// 预览
.one-box {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    > div {
        font-size: 18px !important;
        text-align: left;
        width: 33.33%;
        &:last-child {
            margin-top: 10px;
            text-align: right;
        }
    }

    padding-bottom: 6px;
    border-bottom: 2px solid rgb(240, 240, 240);

    .ftsz10px {
        font-size: 8px !important;
    }
}

.content-box {
    margin-top: 4px;
    .title {
        margin-bottom: 4px;
        font-size: 8px;
        font-weight: bold;
    }

    .content {
        border-top: 2px solid rgb(240, 240, 240);
        border-bottom: 2px solid rgb(240, 240, 240);
        padding: 10px 0 0px;

        .descriptions {
            display: flex;
            flex-wrap: wrap;
            font-size: 8px !important;
            .descriptionsItem {
                width: 25%;
                margin-bottom: 2px;
                font-size: 8px !important;
            }
            .addLine {
                margin-bottom: 2px;
                width: 100%;
                font-size: 8px !important;
            }
        }
        .myTable-head {
            display: flex;
            justify-content: space-around;
            text-align: left;
            padding-bottom: 2px;
            > div {
                flex: 4;
                font-size: 8px !important;
                &:first-child {
                    flex: 2;
                }
                &:nth-child(3) {
                    flex: 2;
                }
            }

            border-bottom: 3px solid rgb(240, 240, 240);
        }
        .myTable-content {
            display: flex;
            justify-content: space-around;
            text-align: left;
            margin-top: 1px;
            padding-bottom: 1px;
            > div {
                flex: 4;
                font-size: 8px !important;
                padding: 0 2px;
                &:first-child {
                    flex: 2;
                }
                &:nth-child(2) {
                    flex: 2;
                }
                &:nth-child(3) {
                    flex: 2;
                }
            }

            border-bottom: 1px solid rgb(240, 240, 240);
            &:last-child {
                border-bottom: 0px solid rgb(240, 240, 240);
            }
        }
    }
}

.table1 {
    .myTable-head,
    .myTable-content {
        > div {
            flex: 10 !important;
            &:first-child {
                flex: 2 !important;
            }
            &:nth-child(2) {
                flex: 9 !important;
            }
            &:nth-child(3) {
                flex: 12 !important;
            }
        }
    }
}

.table2 {
    .myTable-head,
    .myTable-content {
        > div {
            flex: 10 !important;
            word-break: break-all;

            &:first-child {
                flex: 10 !important;
            }
            &:nth-child(2) {
                flex: 4 !important;
            }

            &:nth-child(5) {
                flex: 4 !important;
            }
            &:nth-child(6) {
                flex: 4 !important;
            }
            &:nth-child(7) {
                flex: 4 !important;
            }
        }
    }
}

.table3 {
    .myTable-head,
    .myTable-content {
        > div {
            flex: 10 !important;
            &:first-child {
                flex: 5 !important;
            }
            &:nth-child(2) {
                flex: 5 !important;
            }
            &:nth-child(3) {
                flex: 5 !important;
            }
            &:nth-child(4) {
                flex: 15 !important;
            }
            &:nth-child(5) {
                flex: 3 !important;
            }
            &:nth-child(6) {
                flex: 6 !important;
            }
            &:nth-child(7) {
                flex: 10 !important;
            }
            &:nth-child(8) {
                flex: 5 !important;
            }
        }
    }
}

.table4 {
    .myTable-head,
    .myTable-content {
        > div {
            flex: 10 !important;
            &:first-child {
                flex: 8 !important;
            }
            &:nth-child(2) {
                flex: 8 !important;
            }
            &:nth-child(3) {
                flex: 14 !important;
            }
        }
    }
}
</style>
